Question

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.

Answer 1

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.