Need Help to Replace Stoppropagation() JavaScript

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



Leave a reply



Submit