Using javascript, how do you skip, or remove, e.stopPropagation() from certain class names in an element?
- Go for
Event.target
that will give you the exact clicked element (not necessarily the one that has the Event attached! (.dropdown
) in your specific case) - Having that target element, traverse the DOM starting (and including) that element up the ancestors chain in search for
Element.closest()
- Use an
if
statement to see if that element is found:
document.querySelector(".dropdown").addEventListener("click", e => {
const elClassTrigger = e.target.closest(".trigger");
if ( elClassTrigger ) e.stopPropagation();
});
<div class="dropdown">
<a href="#" class="trigger edit">Edit</a>
<a href="#" class="trigger delete">Delete</a>
<div class="content">
<p>Some Text</p>
</div>
</div>
Removing preventDefault and stopPropagation in javascript
You can replicate the behavior of bind
and unbind
using addEventListener
and removeEventListener
function stopIt(e) {
e.preventDefault();
e.stopPropagation();
}
document.body.addEventListener("click", stopIt);
// then later
document.body.removeEventListener("click", stopIt);
Note: IE <= 8 doesn't support addEventListener
and removeEventListener
, so you'll need to use attachEvent
as mentioned here - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Compatibility
What's the difference between event.stopPropagation and event.preventDefault?
stopPropagation
prevents further propagation of the current event in the capturing and bubbling phases.
preventDefault
prevents the default action the browser makes on that event.
Examples
preventDefault
$("#but").click(function (event) {
event.preventDefault()
})
$("#foo").click(function () {
alert("parent click event fired!")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<button id="but">button</button>
</div>
Stop propagation for all events
No it cannot be declared Globally
The event.stopPropagation()
method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
For example, if there is a link with a click method attached inside of a DIV or FORM that also has a click method attached, it will prevent the DIV or FORM click method from firing.
http://api.jquery.com/event.stopPropagation/
stopPropagation() of a different event
The issue is that two events are triggered when you click the checkbox -- a change
and a click
. You're only catching the change
, so the click isn't ever being told to stop propagation. You need to either add a second handler on the checkbox for click events, or combine one handler to catch both types, like this:
$('input').on('change, click', function (v) {
v.stopPropagation();
});
Here's a jsFiddle demonstrating a combined handler: http://jsfiddle.net/r49PA/4/
Javascript : How to enable stopPropagation?
It doesn't remember the value at all. The event e
is new each time onclick
is fired. The problem is you're always cancelling the event bubbling:
if(foo) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
e.stopPropagation
is the W3C method
of preventing event bubbling.e.cancelBubble
is the Microsoft
method to prevent event bubbling.
They're both the same. So you're cancelling bubbling of events every time. More reading here.
You'll need to change your method so that it only cancels bubbling if your criteria are met:
document.getElementById("object").onclick = function(e) {
if(e && e.stopPropagation && someCriteriaToStopBubbling === true)
{
e.stopPropagation();
}
else if (someCriteriaToStopBubbling === true)
{
e = window.event;
e.cancelBubble = true;
}
}
UPDATE:
Bear in mind that in your current code, if (e && e.stopPropagation)
will always be true if the browser supports stopPropagation
. If it goes into the second brace for cancelBubble
, it will not remember the value last set. See this fiddle.
Basically, to summarise, in your code you're cancelling propagation every time after every click. You have to put some criteria into the function to determine whether or not to cancel the propagation up the element hierarchy.
Related Topics
Jquery/JavaScript CSS("Width")/Check If Style Is Defined in CSS
Jquery Animate Top (From Bottom to Top)
How to Override Expansionpanelsummary Deep Elements with Styled-Components
How to Increase Width of Morris.Js Bar or Add Space Between Bars
Javascript: Scroll from One Div to the Other When Scrolling
CSS Style to Inline Style via JavaScript
Cannot Dynamically Set Initial Element Translation Before Transition in Same Call Stack
Center Flex Item in Container, When Surrounded by Other Flex Items
Fullcalendar.Io: How to Display One Event Per Line in Agendaweek Then Mix All in One
Find Td with Specific Text, and Operate on the Td Right After That One
Show a Bootstrap Modal If Option Is Selected
How to Change Text (Not Font Size) According to Screen Size in CSS
Modify CSS Variables/Custom Properties in Jquery
Ie Not Allowing Onclick Event on Dynamically Created Dom 'A' Element
How to Change CSS Content with Js
Resize Iframe Height According to Content Height
Change the :Before Selector from JavaScript
Syncing Column Width of Between Tables in Two Different Frames, etc