जब उपयोगकर्ता अपने बच्चे के तत्व पर क्लिक करता है तो पेरेंट क्लिक ईवेंट को कैसे रोकें? AngularJS

मेरे पास है ng-click के साथ लेकिन <div> में बच्चे तत्व भी ng-click निर्देश के साथ है। समस्या यह है कि बच्चे तत्व ट्रिगर भीपेरेंट तत्व की क्लिक करें घटना पर क्लिक करें घटना।जब उपयोगकर्ता अपने बच्चे के तत्व पर क्लिक करता है तो पेरेंट क्लिक ईवेंट को कैसे रोकें? AngularJS

जब मैं अपने बच्चे पर क्लिक करता हूं तो मैं अभिभावक क्लिक ईवेंट को कैसे रोक सकता हूं?

Here is a jsfiddle मेरी स्थिति को स्पष्ट करने के लिए।

आपकी मदद के लिए अग्रिम धन्यवाद।

<body ng-app ng-controller="TestController"> <div id="parent" ng-click="parentClick()"> <div id="child" ng-click="childClick()"></div> <p ng-bind="elem"></p> </div> <div><p style="text-align:center" ng-bind="childElem"></p></div> </body> <script> function TestController($scope) { $scope.parentClick = function() { $scope.elem = 'Parent'; } var i = 1; $scope.childClick = function() { $scope.elem = 'Child'; $scope.childElem = 'Child event triggered x' + i; i++; } } </script>

स्रोत

2015-10-22 KeizerBridge

या तो घटना बारी बच्चे हैंडलर के लिए बंद बुदबुदाती या जाँच क्या हैंडलर में क्लिक किया event.target/इस/आपका जवाब yourFrameworksImplementationOfEventTarget – Shilly

आप event.stopPropagation() विधि का उपयोग करना चाहिए:

संपादित

यहाँ मेरी कोड है। देखें: http://jsfiddle.net/qu86oxzc/3/

<div id="child" ng-click="childClick($event)"></div> 

$scope.childClick = function($event) { 
    $event.stopPropagation(); 
    ... 
}

स्रोत

2015-10-22 12:36:44

upvoted का उपयोग कर के रूप में यह बेहतर स्वरूपित :) –

ठीक है किया गया था, अब मैं बेवकूफ लग रहा है लेकिन धन्यवाद कि मैं वही चाहता हूं जो मैं चाहता हूं। मैंने इसके बारे में नहीं सोचा क्योंकि मैं आम तौर पर तत्व को कभी नहीं पारित करता हूं। लेकिन क्या स्टॉपप्रॉपेशन के बिना इसे करने का कोई और तरीका है? – KeizerBridge

आप http://stackoverflow.com/a/33281294/1782659 जैसे कुछ कर सकते हैं लेकिन मुझे लगता है कि यह वास्तव में बदसूरत है। उच्चतम बबलिंग से ईवेंट को रोकना सही काम है (आईएमओ) आप ईवेंट के लक्ष्य को भी देख सकते हैं (यदि $ event.target === childElement) –

उपयोग event.stopPropagation बच्चे ईवेंट हैंडलर से डोम पेड़ खलबली मचाने वाले से event को रोकने के लिए।

Updated Demo

function TestController($scope) { 
 
    $scope.parentClick = function() { 
 

 
    $scope.elem = 'Parent'; 
 
    } 
 

 
    var i = 1; 
 
    $scope.childClick = function(e) { 
 
    $scope.elem = 'Child'; 
 
    $scope.childElem = 'Child event triggered x' + i; 
 
    i++; 
 

 
    e.stopPropagation(); // Stop event from bubbling up 
 
    } 
 
}

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
#parent { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    z-index: 1; 
 
    margin: 10px auto 0 auto; 
 
    background-color: #00acee; 
 
    border-radius: 2px; 
 
    cursor: pointer; 
 
} 
 
#parent:hover { 
 
    opacity: 0.5; 
 
} 
 
#child { 
 
    width: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
    z-index: 2; 
 
    background-color: #FFF; 
 
    border-radius: 2px; 
 
    cursor: pointer; 
 
} 
 
#child:hover { 
 
    opacity: 0.5; 
 
} 
 
#parent p { 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    text-align: center; 
 
    color: #FFF; 
 
}

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

 
<body ng-app ng-controller="TestController"> 
 
    <div id="parent" ng-click="parentClick()"> 
 
    <div id="child" ng-click="childClick($event)"></div> 
 
    <!--         ^^^^^^^  --> 
 
    <p ng-bind="elem"></p> 
 
    </div> 
 
    <div> 
 
    <p style="text-align:center" ng-bind="childElem"></p> 
 
    </div> 
 
</body>

स्रोत

2015-10-22 12:39:12 Tushar

यहां तक कि अगर पीटर Willaert के जवाब और अधिक सुंदर मैं एक साधारण बूलियन जांच के साथ अपने बेला अद्यतन किया जाता है:

http://jsfiddle.net/qu86oxzc/6/

function TestController($scope) { 
    $scope.boolean = false; 
    $scope.parentClick = function() { 
     if (!$scope.boolean) $scope.elem = 'Parent'; 
     $scope.toggleBoolean(); 
    } 

    var i = 1; 
    $scope.childClick = function() { 
     $scope.boolean = true; 
     $scope.elem = 'Child'; 
     $scope.childElem = 'Child event triggered x' + i; 
     i++; 
    } 

    $scope.toggleBoolean = function() { 
     $scope.boolean = !$scope.boolean; 
    } 
}

स्रोत

2015-10-22 12:40:42 messerbill

भी आप इसका उपयोग कर सकते हैं क्योंकि इसका उपयोग समान होता है।

<div id="child" ng-click="childClick();$event.stopPropagation();"></div>

स्रोत

2015-10-28 11:25:34 Nadeem

आप $event.stopPropagation(); भी आजमा सकते हैं। बच्चे के काम के बाद इसे लिखें। यह preventdefault की तरह काम कर रहा है।

<body ng-app ng-controller="TestController"> 
<div id="parent" ng-click="parentClick()"> 
    <div id="child" ng-click="childClick();$event.stopPropagation();"></div> 

    <p ng-bind="elem"></p> 
</div> 

<div><p style="text-align:center" ng-bind="childElem"></p></div> 
</body>

स्रोत

2016-12-23 12:44:40

जब उपयोगकर्ता अपने बच्चे के तत्व पर क्लिक करता है तो पेरेंट क्लिक ईवेंट को कैसे रोकें? AngularJS

उत्तर

संबंधित मुद्दे