CODEWITHSUNDEEP
javascriptjquerystoppropagation
Michael
Michael

Reputation: 13626

Why does this inline stopPropagation method call not work?

I have this button:

<button 
    type="button" 
    onclick='parent.parent.ExecuteCommand(14);event.stopPropagation()' 
    class="button_air-medium">
    <img 
        id="selectMode" 
        class="shortcutContant" 
        src="../stdicons/icon_select.gif">
</button>

As you can see inside onclick attribute I call 2 functions ExecuteCommand and stopPropagation.

The execute command works fine but it seem to me that stopPropagation method is not fired because the element under the button is influenced.

Any idea why stopPropagation method is not working?

Upvotes: 2

Views: 160

Answers (1)

mplungjan
mplungjan

Reputation: 178160

There is likely no eventavailable to the inline handler in the browser you are using

You will have an easier time if you do 

$(function() { 
  $(".button_air-medium").on("click",function(e) { 
    e.stopPropagation(); 
    parent.parent.ExecuteCommand($(this).data("commandnumber")) 
    // or return false here
  });
});

using

<button type="button" data-commandnumber="14"
class="button_air-medium"><img id="selectMode" class="shortcutContant" 
src="../stdicons/icon_select.gif"></button>

If you want to stop the image from handling events you could try

$(function() { 
  $(".button_air-medium").on("click",function(e) { 
    e.stopPropagation(); 
    parent.parent.ExecuteCommand($(this).data("commandnumber")) 
    // or return false here
  });
  $(".button_air-medium > img").on("click",function(e) {
    $(this).parent().click();
    return false; 
  });
});

or find where it is handled and edit that handler

Upvotes: 1

Related Questions