檢查一個div或者它的一個子是否被點擊

我有一個div如下檢查一個div或者它的一個子是否被點擊

<div class="parent"> 
    <!--several child divs now--> 
</div>

現在，我已經註冊使用AngularJS對身體的點擊處理程序如下：

HTML：

<body ng-click="registerClick($event)"> 
</body>

控制器：

$scope.registerClick(e) { 
    //Here check if the parent div or one of its children were clicked 
}

如何在我的處理程序中使用$event來確定是否點擊了「父級」或其子級的div？

來源

2015-10-13 Tarun Dugar

你在項目 –

爲什麼在身上，而不是在div本身正在註冊自己的點擊處理程序有jQuery的？你可以擁有儘可能多的處理程序。你真的不應該推出自己的點擊處理程序來檢查實際點擊的元素。讓棱角爲你做。 – ste2425

是的，但如果可能的話，我仍然會傾向於角度，純javascript的解決方案。 –

它改成這樣：

$scope.registerClick(e) { 
    if (e.target.classList.contains('parent')){ 
     // The .parent div is clicked 
    } else if (e.target.parentNode.classList.contains('parent')){ 
     // Some child of the .parent div is clicked 
    } else { 
     var elem = e.target; 

     while(elem.tagName != 'body' || !elem.classList.contains('parent')){ 
      elem = elem.parentNode; 
     } 

     if (elem.classList.contains('parent')){ 
      console.log('DIV .parent') 
     } else { 
      console.log('Body tag reached. No .parent element found'); 
     } 
    } 
}

e.target是點擊的元素。用它來確定哪個元素被點擊。這是一個乾淨的JavaScript解決方案。你甚至不會需要$scope.registerClick(e) {的一部分，如果能附上事件，像這樣：如果你使用後一種方式，「這個」點到div

someDiv.onclick = function(){/* Same code as above. */}

，這樣就可以使驗證一點點。

來源

2015-10-13 11:45:45

這僅適用於直接父級。任何想法如何遍歷所有的父節點？ –

@Tarun我編輯了我的答案。檢查出來並測試它，因爲目前我必須去測試它 –

謝謝！那就是我一直在尋找的:) –

你可以做這樣的事情

var app = angular.module('my-app', [], function() {}) 
 

 
app.controller('AppController', function($scope) { 
 
    $scope.registerClick = function($event) { 
 
    //if has jQuery 
 
    if ($($event.target).closest('.parent').length) { 
 
     console.log('clicked parent'); 
 
     $scope.jQuery = true; 
 
    } else { 
 
     $scope.jQuery = false; 
 
    } 
 

 
    var isParent = false; 
 
    if (angular.isFunction($event.target.closest)) { 
 
     isParent = !!$event.target.closest('.parent'); 
 
    } else { 
 
     var tmp = $event.target; 
 
     do { 
 
     isParent = tmp.classList.contains('parent'); 
 
     tmp = tmp.parentNode; 
 
     } while (tmp && tmp.classList && !isParent); 
 
    } 
 
    $scope.native = isParent; 
 
    }; 
 
})

.parent { 
 
    border: 1px solid grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div ng-app="my-app"> 
 
    <div ng-controller="AppController" ng-click="registerClick($event)"> 
 
    <div>outside</div> 
 
    <div class="parent"> 
 
     parent 
 
     <div>div</div> 
 
     <div>div</div> 
 
    </div> 
 

 
    <div> 
 
     jQuery: {{jQuery}} 
 
    </div> 
 
    <div> 
 
     native: {{native}} 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-10-13 11:54:31

http://jsfiddle.net/arunpjohny/95w5b9m6/2/ –

檢查一個div或者它的一個子是否被點擊

回答

相關問題