Capure js click button over another button - javascript

I have a button over another button in a way like this
<button id="button1" style="width:200px; height:200px; position:relative; border: 1px solid;">
test
</button>
<script>
document.getElementById("button1").onclick = function(e) {
console.log("button1 click");
}
document.getElementById("button2").onclick = function(e) {
console.log("button2 click");
}
</script>
When I click on button2, also the button1 is clicked, but I would only capture button2 click
Tried with e.preventDefault() without success...

First of all, I think it's not valid HTML. You shouldn't have a <a> tag inside <button>
For more information about <button> check this.
You're facing this problem because of event bubbling. Check this links for more details regarding event bubbling.
https://javascript.info/bubbling-and-capturing
You can fix this problem using event.stopPropagation(); But I must say it's not the right approach

This happens because of bubbling. Event runs the handlers on every parent all the way up. You could do something like this to fix this.
<button id="button1" style="width:200px; height:200px; position:relative; border: 1px solid;">
test
</button>
<script>
document.getElementById("button1").onclick = function(e) {
console.log("button1 click");
}
document.getElementById("button2").onclick = function(e) {
console.log("button2 click");
e.stopPropagation();
}
</script>

Related

How can i make a button clicked when i just click a div

<div id="mydiv"><div>
<button style="visibility:hidden; float:left"></button>
I wanna make the hidden button as is clicked when someone click the div "mydiv".
As AndrewL said, you don't need a button for this. But if you want to use a button anyways, simply assign a eventListener to your div that simulates a click on the button:
document.querySelector('#mydiv').addEventListener('click', () => {
document.querySelector('button').click();
});
Example
(I added some CSS rules and an extra function for visualization.)
document.querySelector('#mydiv').addEventListener('click', () => { // Listen for clicks on the div
document.querySelector('button').click(); // Simulate a click on the button
});
function test() { // This function gets called when clicking the button
console.log("Click!");
}
<div id="mydiv" style="height: 100px; width: 100px; background-color: red;">
<div>
<button style=" visibility:hidden; float:left; " onclick="test()"></button>
</div>
</div>
You dont need a hidden button for this. Just assign a click listener to the div itself using js like this:
const btn = document.getElementById('mydiv');
function doSomething(){
//run your script here when div is clicked
}
btn.addEventListener('click', doSomething);
You don't really need the hidden button to catch the click event. But if you really need it:
<div id="mydiv" onclick="document.getElementById('btn').click()">click on me<div>
<button id="btn" style="display:none;" ></button>
With jQuery, you can do something like this:
$('#div_id').click(function(){$('#btn_id').trigger('click');});
$('#btn_id').click(function(){//Business logic here on btn click
});

Div event bubbling

I have in my project a window click eventListener and some click events on div elements. If i click on the div the click event on this div-element (correct) and the window click eventListener fires (not correct).
Can I bubble the div element that the window click eventListener do not fire the event?
For a better demonstration jsfiddle:
window.addEventListener('mouseup', onDocumentMouseUp, false);
function onDocumentMouseUp(event){
alert('dont fire this event on button click')
}
$('#button').on({
click: function (event) {
alert('button click event');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button" style="height: 30px; width: 30px; background: blue"></div>
I hope somebody can help me.
Yes, you can use event.stopPropagation() like this:
$('#button').on({
click: function (event) {
alert('button click event');
event.stopPropagation();
}
});

How can call the jquery function onclick only parent element [duplicate]

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>

JQuery: How to stop child onclick event while still triggering the parent onclick event

I wonder how can I stop child onclick event while still triggering the parent onclick event. For example the following structure:
<div id="parent">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</div>
if I click "child1" for example, the onclick event for "child1" will not be triggered, however, the onclick event for "parent" will still be triggered.
Thank you very much!
You could just pass the click to the parent?
$('.child1').click(function(e){
e.preventDefault();
$(this).parent('#parent').trigger('click');
});
When you click .child1, it will prevent the default action, and then trigger the click for the parent of child1 with an id of #parent.
Actually - probably ignore the above - as per the comment below it may cause bubbling. All you really need to do is use e.stopPropagation();.
I've created a jsfiddle showing how although the child1 has a click function bound to it, it's being ignored, and so the parent click is only getting picked up.
The simplest way to do this is unbind the child's event handler.
$('#child1').unbind('click');
Here is a solution bin for above issue. please check demo link once.
Demo: http://codebins.com/bin/4ldqp7l
HTML
<div id="parent">
<div id="child1">
Child-1
</div>
<div id="child2">
Child-2
</div>
<div id="child3">
Child-3
</div>
</div>
jQuery
$(function() {
$("#parent").click(function() {
alert("Parent has been clicked too...!");
});
$("#child1").click(function(e) {
e.stopPropagation();
alert("Child-1 has been clicked...!");
});
$("#child2").click(function() {
alert("Child-2 has been clicked...!");
});
$("#child3").click(function() {
alert("Child-3 has been clicked...!");
});
});
CSS
#parent{
padding:5px;
background:#a34477;
width:140px;
text-align:center;
padding:10px;
}
#parent div{
border:1px solid #2211a4;
background:#a3a5dc;
width:100px;
text-align:center;
font-size:14px;
margin-left:10px;
margin-top:3px;
}
Demo: http://codebins.com/bin/4ldqp7l
do you mean:
$('#parent').on('click', function(e) {
if( e.target !== this ) {
return;
}
});

Onclick change div style + onclick outside div remove style change

I would like to change the style on a div with an onclick... and remove the style when clicking somewhere outside of the div.
I have the following code setup... can someone help me to remove the style on the divs if you click anywhere else on the page?
<head>
<style type="text/css">
.account{
width: 100px;
height: 100px;
border: 1px solid #000;
}
.selected{
border: 2px solid #F00;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".account").click(function(){
$(".selected").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
</head>
<body>
<h1>the test</h1>
<div class="account">test 1</div>
<div class="account">test 2</div>
</body>
Thank you very much for any help you can give me!!!
The following should do it:
$(document).on('click', function(e) {
if($(e.target).hasClass('account')) {
// do style change
}
else {
// undo style change
}
});
It binds the event handler to the entire document, so you'd have problems with any event handlers on more specific elements that call e.stopPropagation().
Try this.
$(document).ready(function(){
$(".account").click(function(e){
$(".selected").removeClass("selected");
$(this).addClass("selected");
e.stopPropagation();//This will stop the event bubbling
});
//This event handler will take care of removing the class if you click anywhere else
$(document).click(function(){
$(".selected").removeClass("selected");
});
});
Working demo - http://jsfiddle.net/yLhsC/
Note that you can use on or delegate to handle click event on account elements if there are many on the page.
Something like this.
Using on if using jQuery 1.7+
$('parentElementContainingAllAccounts').on('click', '.account', function(e){
$(".selected").removeClass("selected");
$(this).addClass("selected");
e.stopPropagation();//This will stop the event bubbling
});
Using delegate
$('parentElementContainingAllAccounts').delegate('.account', 'click', function(e){
$(".selected").removeClass("selected");
$(this).addClass("selected");
e.stopPropagation();//This will stop the event bubbling
});
You can achieve this behavior with attaching click listener on body element e.g.:
$("body").click(function(){
});
Try this:
$(document).ready(function() {
$('.account').click(function(e) {
e.stopPropagation();
$(this).addClass("selected");
});
$(document).click(function(){
$('.selected').removeClass('selected');
});
});

Categories

Resources