I have an event on clicking the top <tr> and then also an event on clicking the tr > td > button. When i click the tr > td > button, the related onclick() function is running but, the function related on <tr> is also running after previous.
Like:
<tr onclick="run_tr();">
<td><input type="button" onclick="run_td();" /></td>
</tr>
How can i stop automatically calling the next call by clicking the button?
At button onclick function you need to stop event bubbling:
event.stopPropagation();
Following to your code:
HTML:
<input type="button" onclick="run_td( event );" />
JS:
function run_td( event ) {
if ( event.stopPropagation ) {
event.stopPropagation();
}
event.cancelBubble = true;
// ... rest of your code.
}
You have to stop the event's propagation, by using the method e.stopPropagation(). For more info, check out this link : http://www.quirksmode.org/js/events_order.html#link9
I don't understand why you can't use the recommended methods, here's an example:
<div onclick="alert('div click called');">
Click here to see div onclick
<button onclick="
(event.stopPropagation && event.stopPropagation());
event.cancelBubble = true;
alert('stopped click');
">Button click but no div click</button>
</div>
Related
I have a clickable parent element. As a child element I have a dropdown. When I click this dropdown, it also triggers the parent element.
The table elements are rendered dynamically as rows, thus I would like to target the elements by Id and not by class.
I have tried with e.stopPropagation() but then it prevents the dropdown to toggle.
Very thankful for any help!
document.getElementById("entirerow"+doc.id).addEventListener("click", function(e){
alert("Entire row clicked")
})
document.getElementById("dropdown"+doc.id).addEventListener("click", function(e){
alert("Only button clicked")
//e.stopPropagation(); I have tried this but it prevents the dropdown from triggering at all.
})
<tr id="entirerow"+doc.id>
<td>
<span>
<button id="dropdown"+doc.id>myDropdown</button>
</span>
</td>
<td>
...
</td>
</tr>
You could return early in your parent listener callback if the event target is the dropdown.
document.getElementById("entirerow"+doc.id).addEventListener("click", function(e){
if(e.target.id === ("dropdown"+doc.id)){
return;
}
alert("Entire row clicked");
})
document.getElementById("dropdown"+doc.id).addEventListener("click", function(e){
alert("Only button clicked");
})
lHi,
I have some divs in a html doc and when I click the div I am adding a button. eg attached:
HTML:
<div class="week">
<div class="day wk1" id="day1">
<label for="day1">Test</label>
</div>
<div class="day wk1" id="day2">
<label for="day2">Test</label>
</div>
When I add a button by clicking on the div, no problem.
Add Button:
$(".day").click(function (e) {
e.preventDefault();
var check = $("#day7").width() - 2;
var insert = $(this).prop("id");
insert = `#${insert}`;
var par = $('<br class="break"><button class="testing">').html('Shift Manual Insert').width(check).css("background-color", "green");
par.appendTo(insert);
// console.log(insert);
});
When I remove the button by clicking on it it does remove it but simultaneously adds a new button as per the code above and below.
Remove Button:
$(".day").on('click','.testing', function(e){
e.preventDefault();
$(".break").remove;
$(this).remove();
});
I am sure I am doing something silly but for the life of me, I cannot figure it out? Please ignore my incorrect use of id's and classes, this is purely a test to gain experience.
Any help will be most appreciated.
Kind regards
Wayne
The event is getting propagated from the click handler on dom with .testing class to it's parent that is dom with .day class. .day have another click handler which add the element.So after removing the element again $(".day").click(function(e) { is getting fired which is adding back the button element
Replacee.preventDefault(); with e.stopPropagation(); in the click handler of .testing
$(".day").click(function(e) {
console.log('x')
e.preventDefault();
var check = $("#day7").width() - 2;
var insert = $(this).prop("id");
insert = `#${insert}`;
var par = $('<br class="break"><button class="testing">').html('Shift Manual Insert').width(check).css("background-color", "green");
par.appendTo(insert);
// console.log(insert);
});
$(".day").on('click', '.testing', function(e) {
e.stopPropagation();
$(".break").remove;
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="week">
<div class="day wk1" id="day1">
<label for="day1">Test</label>
</div>
<div class="day wk1" id="day2">
<label for="day2">Test</label>
</div>
Your button is present inside the div. So when you click the button, your div click event is also fired. This is due to event bubbling. Check https://www.w3schools.com/jquery/event_stoppropagation.asp
$(".day").on('click','.testing', function(e){
e.stopPropagation();
e.preventDefault();
$(".break").remove;
$(this).remove();
});
I'm trying to stop the bubbling of event of an inner checkbox to the click event of the tr element.
I have the following mark up:
<table border="1">
<tr class="row">
<td>
Item 1
</td>
<td>
<input type="checkbox" class="cb">
</td>
</tr>
<tr class="row">
<td>
Item 2
</td>
<td>
<input type="checkbox" class="cb">
</td>
</tr>
</table>
The rows are dynamically added, so to add listeners automatically to dynamically added elements, I used the following code:
$(document).ready(function() {
$('body').off('click.row').on('click.row', '.row', function() {
alert(1);
});
$('body').off('change.cb').on('change.cb', '.cb', function(e) {
e.stopPropagation();
alert(2);
});
});
However the event still bubble up to the tr element. I tried also the following:
e.stopImmediatePropagation();
window.event.cancelBubbles = true;
e.bubbles = false;
none seemed to work.
I reproduced this issue with JSFiddle:
JSFiddle
In this case, there is no event bubbling occuring because you have different events defined on different elements that just so happen to both fire when a mouse clicks on the check box (because you have also clicked a row).
You should either not add the row click event listener at all, or move stopPropagation to the the other handler to stop it from firing.
$(document).ready(function() {
$('body').off('click.row').on('click.row', '.row', function() {
e.stopPropagation();
alert(1);
});
$('body').off('change.cb').on('change.cb', '.cb', function(e) {
alert(2);
});
});
This question already has answers here:
How to stop events bubbling in jQuery? [duplicate]
(5 answers)
Closed 7 years ago.
I am trying to call a jQuery function when clicked only on parent element.
<div id="clcbox" class="click-img">
<img id="fire" onclick="createFirework()" src="img/clicker.png" />
</div>
I have an img tag inside a div. When I click on the div it should call one function and when I click on the img I want to call another function. How can I do this?
$('.click-img, .wishes').click(function () {
$('.flipWrapper').find('.card').toggleClass('flipped');
return false;
});
When I click the div I should call the above function. However now when I click on the image, it is also calling this function and createFirework().
The issue is due to event bubbling. If you attach your events in an unobtrusive manner you can easily stop this behaviour.
<div id="clcbox" class="click-img">
<img id="fire" src="img/clicker.png" />
</div>
$('#fire').click(function(e) {
e.stopPropagation();
createFirework();
});
$('.click-img, .wishes').click(function (e) {
$('.flipWrapper').find('.card').toggleClass('flipped');
e.preventDefault();
});
First off, don't mix inline (onclick) event handlers and jQuery event handlers. Once, you've got a jQuery event handler in place of your createFirework method, you simply stopPropagation to stop it calling the handler on the outer div.
Below is an example
$('.outer').click(function(e){
alert("You clicked text in the div");
});
$('.inner').click(function(e){
alert("You clicked the button, but the div event handler will not fire");
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<span>here is some text inside the div, click it</span>
<button class="inner">Click me</button>
</div>
You need to use stopPropagation function:
http://www.w3schools.com/jquery/event_stoppropagation.asp
In your case you need to add this on image click event:
$('.click-img, .wishes').click(function (event) {
event.stopPropagation();
$('.flipWrapper').find('.card').toggleClass('flipped');
return false;
});
It looks like you need to stop the click event from the image bubbling up the DOM chain.
$('.click-img, .wishes').click(function (e) {
$('.flipWrapper').find('.card').toggleClass('flipped');
e.stopPropagation();
});
When you click on the image, that event is passed up to it's parent, in this case the <div>. That is by behavior. To stop that from ocurring, you call the stopPropagation() function that is part of the incoming event argument for the click event.
You can use Event.stopPropagation(), to stop the click event bubble to its parents, but you also need to add a param event, so your function can access it without browser issue.
// VVVV pass `event` as createFirework's param.
<img id="fire" onclick="createFirework(event)" src="http://placehold.it/50x50" />
But I'd suggest that answers that separate js part and html part would be better. Just like Jamiec's.
function createFirework(event) {
console.log('inner');
event.stopPropagation();
}
$('.click-img, .wishes').click(function () {
console.log('outer');
return false;
});
#clcbox {
width: 100px;
height: 100px;
border: solid 1px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clcbox" class="click-img">
<img id="fire" onclick="createFirework(event)" src="http://placehold.it/50x50" />
</div>
I have a div as a ui-widget-content with a h3 as a ui-widget-header. The header has three buttons. Each have the class "save" "delete" and "cancel" respectivly. I want to have a .click function whene ever you click on the div, except if you actually click on one of the buttons.
I tried: $(".record").not(".save").not(".delete").not(".cancel").click(
my code is:
<div class="record cursorPointer hoverClass ui-widget-content">
<h3 class="ui-widget-header">
<table width="100%"><tr>
<td align="left" style="width:33%; color:Red">somecontractorone</td>
<td style="width:33%" align="center"> Name: Joe Q Shmoe </td>
<td style="width:33%" align="right"> Buisness: joeqshmoeelectrical</td>
<td><button style="width:20px;height:20px" class="save"></button></td>
<td><button style="width:20px;height:20px" class="delete"></button></td>
<td><button style="width:20px;height:20px" class="cancel"></button></td></tr>
</table>
</h3>
</div>
However the click function still activated when clicking the buttons.
Any ideas?
You can use the event.target to see what was clicked. Then rely on even bubbling and attach the click handler on the parent div. jsfiddle
$('.record').click(function(e){
if($(e.target).is(':button'))
alert('button');
else
alert('not button');
});
Assuming that you have another event handler (or several) that handles the buttons, you can prevent the bubbling there with
$('button').click(function(e) {
e.stopPropagation();
switch( this.className ) {
// Or whatever...
}
})
Use e.stopPropagation() in the buttons' click handler(s):
$('button').click(function(e) {
e.stopPropagation();
alert('you clicked a button!');
});
Here's a demo: http://jsfiddle.net/Ender/2yERz/
And some documentation on e.stopPropagation(): http://www.quirksmode.org/js/events_order.html#link9