Igor Savinkin
Igor Savinkin

Reputation: 6267

JS events collision

There is a collision while i run a html with inbuilt JS/jQuery. While this action onclick='window.location="location A" works for the whole area and onclick='action 1' should work only for 'Delete' link. The collision is when i press the 'Delete', JS works out the needed action1 first and also (that is not needed) redirects into 'location A'. Is it possible to leave the link inside the area and make this div's JS not reacting on the click to this link?

<div class='scraper_item' onclick='window.location="location A"'>
<ul class="scraper_actions1">
    <li><a href="/">Schedule</a></li>
    <li><a class="delete" onclick='action1'>Delete</a></li>
</ul>
</div>    

P.S. There should be jQuery script hanging on the 'delete' class. The preventDefault() method in jQuery on delete class does not work to prevent moving to location A.

Upvotes: 1

Views: 897

Answers (2)

Aesthete
Aesthete

Reputation: 18850

Returning false from a jQuery event callback is the same as calling e.preventDefault() and e.stopPropogation()

Upvotes: 0

Ohad
Ohad

Reputation: 1719

If you intend to do it with jQuery:

$('div.scraper_item').click(window.location='location A');
$('a.delete').click(function(e){
    e.stopPropagation();
    action1();
});

e.stopPropogation() is what you're looking for, and it means the event we're dealing it will only trigger the current function and not all the events that it's parents are supposed to trigger.

Upvotes: 2

Related Questions