I have an edit button inside a table cell.
The table cell event has an "click" event, And the edit button who is inside a cell has another click event set to it.
Is there a way to prioritize the button event over the table cell event?
I tried using a different z-index for the button, but it didn't work.
The button cannot go outside the the table as its closest tr holds id data which is crucial for the proper event to function.
You can call event.stopPropagation() as part of the click handler for the button, to prevent the click event from bubbling up to the table cell. Documentation: http://api.jquery.com/event.stopPropagation/
Inside the click handler on the button, you just need to call event.stopPropagation().
element.onclick= function(event) {
// ...
event.stopPropagation();
// ...
}
Look into a tutorial on bubbling and capturing events, such as http://javascript.info/tutorial/bubbling-and-capturing
Related
I am dealing with a javascript datatable with clickable rows. Each row when clicked forwards the browser to a different page.
A column of the row contains a hyperlink. When the hyperlin is clicked I don't want the row click event to be fired or managed.
Here is how I have implemented the row click event
$(tableId+' tbody').on( 'click', 'tr', function (e) {
window.location.href = $(this).attr('url');
});
When you add an event listener to a parent, the event by default "bubbles" downwards and attaches the event to all children. So in this case you setting the event on tr (parent) and the event will bubble down and attach itself to the td (children). So one of these td from what I understand contains your href (hyperlink) and so to block the click event which originally was set on the parent, you have to set another event listener specifically of the event type click within the function for this event you simply need state event.stopPropagation() and it will override the tr click event which bubbled down.
document.addEventListener('DOMContentLoaded',()=>{
//SET EVENT ON PARENT(TR), EVENT BUBBLES BY DEFAULT DOWNWARDS THEREFORE TD's WILL INHERIT
document.getElementById('parent').addEventListener('click',()=>window.location.href = "wherever");
//ADDING ANOTHER EVENT LISTENER OF THE SAME TYPE (CLICK) WHICH BLOCKS THE BUBBLING PROPOGATION DOWNARDS
document.getElementById('myhyperlink').addEventListener('click',(e)=>event.stopPropagation());
});
If you want to prevent clicking on anchor from redirecting a page, you have to simply catch the click event and disable it's default behaviour.
$("table td a").click(function(e){
e.preventDefault();
});
You have to just prevent default behaviour, if you would also stop propagation of event, your other event listener wouldn't get called. See more info here: What's the difference between event.stopPropagation and event.preventDefault?
If your goal is to disable redirect of anchor links only when the javascript is enabled, another solution might be to set onclick attribute that would disable default redirect. However, this seems not to work in webkit based browsers.
and example
Here is jsFiddle with example
Use preventDefault()
$(tableId+' tbody').on( 'click', 'tr', function (e) {
e.preventDefault();
window.location.href = $(this).attr('url');
});
You can write code following ways:
$(tableId+' tbody').on( 'click', 'tr', function (e) {
e.preventDefault();
window.location.href = $(this).attr('url');
});
you have to disable row click for that particular column
$('tableId+' tbody'').on('click', 'td', function () {
if ($(this).index() == 4 ) { // provide index of your column in which you prevent row click here is column of 4 index
return;
}
// you can do additional functionality by clicking on this column here
});
I slightly modified FU thumbnail template to hook a click event on it. I also display a delete button (the provided one).
The problem is that when I click on the delete button, the click event bubbles to the rest of the javascript stack.
How can I prevent the delete button to propagate the click event??
(usually you do something like event.stopPropagation()...).
Thanks for your help
If you'd like to prevent any DOM event from bubbling, simply attach an event handler to the element where you would like it to terminate and call stopPropagation() on the Event object. For example, for a click event:
someElement.addEventListener('click', function(event) {
event.stopPropagation();
});
The above code will not work in IE8 and older since addEventListener and stopPropagation were first introduced in IE9.
My element updates its options using the onclick() listener when clicked. The problem is the listener is firing when an option is clicked as well, so the user is unable to select anything in the updated list.
groupSelect.onclick = function() {
PopulateList();
}
I'd like to run my function only when the select element is clicked(when the menu has not dropped down yet) but not when a specific option is clicked. How can I do so? I'm writing the JS part using NodeJS.
Events will bubble up the hierarchy, so a click on an option will also trigger any events bound to its parent select.
This is fixed by stopping propagation of the event on your option listener
$('option').click(function(event){
event.stopPropagation();
//rest of code
})
I have a div display some titles of music which is clickable. When you click it it will show some more detail information. Then I also have a button in the clickable div. When I click the button. It won't call the function of the button but the function of the div? Is there a way to solve this? Thank you!
$("#myComList").append("<div id="+comListID+" class=listDiv> <p class=comTitle><? echo $row["compositionTitle"] ?>(<?echo $row["year"]?>)</p><button id="+comListID+"btn class=addNewArrBtn>Add new Arrangement</button> <p class=comOri>BY <? echo $row["OrigComposer"] ?></p> </div>");
$('#'+comListID).click(function() {
$(this).find("li").slideToggle('slow', function() {
});
$("#"+comListID+"btn").click(function(){
addNewArr(comListID);
});
It's called 'bubbling'. The button is inside the div so it's executing button then up the chain to div. Add event.stopPropagation() inside the button function.
$("#"+comListID+"btn").click(function(event){
event.stopPropagation();
addNewArr(comListID);
});
From jQuery documentation:
By default, most events bubble up from the original event target to
the document element. At each element along the way,
jQuery calls any matching event handlers that have been attached.
A handler can prevent the event from bubbling further up the document
tree (and thus prevent handlers on those elements from running) by
calling event.stopPropagation(). Any other handlers attached on the
current element will run however. To prevent that, call
event.stopImmediatePropagation(). (Event handlers bound to an element
are called in the same order that they were bound.)
http://api.jquery.com/on/
So you'd call event.stopPropagation() inside the button click handler, as to stop the div event from firing.
I believe I understand your question without seeing the code. The problem it sounds like stems from the click event bubbling or propagating up. Below is a sample of code to try and a link to a fiddle for you to test:
<div id="testDiv" onclick="alert('Stop Clicking Me!');">
<button type="button" onclick="function(e) { alert('You hit the button!'); e.stopPropagation(); }">Click Me!</button>
</div>
In this function, the:
e.stopPropagation();
prevents the click event from filtering up to its parent container (in this case "testDiv") and triggering its click event as well. You can test it and see for yourself in the jsfiddle below:
Test Fiddle
EDIT:
In your case:
$("#"+comListID+"btn").click(function(e){
addNewArr(comListID);
e.stopPropagation();
});
add the event parameter to the click function and stop it from propagating to the parent.
Hope this helps.
I have a button(styled from a div tag, jquery UI) and a input text box inside. I want that if I click the text box the button won't get clicked also.
Inside your event handler for the input element:
$("input").click(function (event) {
event.stopPropagation();
});
stopPropagation stops the event from propagating up the DOM tree, which prevents parent event handlers of being notified of the event.
Here's an example: http://jsfiddle.net/J76Gw/
Alternatively you can check inside the button's click handler whether event.target is the input field or not.
Use event.stopPropagation(); for textbox click event.
In the click handler for the input box you need to stop the click event propagating to the parent DOM element. So check out event.stopPropagation() - more info here.