I am having a structure like
<div onclick="first()">
//first div
<div onclick="second()">
//second div
<div onclick="third()">
//my content here inner div
</div>
</div>
</div>
when I am clicking on any div it's calling the first function. How to achieve the situation that only the div I clicked then the corresponding function is called. I am new to javascript.
Since your DIVs are nested inside each other, the click event will bubble out to each element. If you only want it to be on the inner DIV that you click on, you need to call event.stopPropagation() to stop the bubbling. This means you have to pass the event object to the functions.
<div onclick="first(event)">
//first div
<div onclick="second(event)">
//second div
<div onclick="third(event)">
//my content here inner div
</div>
</div>
</div>
Then the functions have to be like:
function first(e) {
e.stopPropagation();
// rest of code here
}
You can use event.stopPropagation() to stop the click event from bubbling up.
function first(){
this.event.stopPropagation();
alert( 'first div' );
}
function second(){
this.event.stopPropagation();
alert( 'second div' );
}
function third(){
this.event.stopPropagation();
alert( 'third div' );
}
<div onclick="first()">
//first div
<div onclick="second()">
//second div
<div onclick="third()">
//my content here inner div
</div>
</div>
</div>
Try Event.stopPropagation() which prevents further propagation of the current event in the capturing and bubbling phases.
function first(e){
e.stopPropagation();
alert('first function')
}
function second(e){
e.stopPropagation();
alert('second function')
}
function third(e){
e.stopPropagation();
alert('third function')
}
<div onclick="first(event)">
first div
<div onclick="second(event)">
second div
<div onclick="third(event)">
my content here inner div
</div>
</div>
</div>
The problem is that clicking on a child div, it triggers every parents of this div (clicking on third will triggered second which will trigger first).To prevent the propagation you need to stopPropagation like this
See onclick documentation
function first(e){
e.stopPropagation();
console.log('you are in first')
}
function second(e){
e.stopPropagation();
console.log('you are in second')
}
function third(e){
e.stopPropagation();
console.log('you are in third')
}
<div onclick="first(event)">
//first div
<div onclick="second(event)">
//second div
<div onclick="third(event)">
//my content here inner div
</div>
</div>
</div>
Related
I have a function that set yellow in the background of the paragraph when occurs a double click.
It works fine until I call a function that sort those paragraphs.
After sort it, the dblclick doesn't works when the user click twice again.
The html page:
<div class="row row-artigo">
<div class="col-md-10 text-justify">
<span class="artigo highlight">
I - Loren Ipsun Dolor;
</span>
</div>
<div class="col-md-2 text-right">
<div class="botoes">
<span class="qtd-voto">1</span>
</div>
</div>
</div>
highligh is the class added after double click. The dbl click function:
$("span.artigo").on("dblclick",(function(e){
if ($(this).hasClass( "highlight" )){
$(this).removeClass("highlight");
is_marcado = 0;
}else{
$(this).addClass("highlight");
is_marcado = 1;
}
}));
The sort is based on the class qtd-voto as follow:
$("a#ordenacao").on("click",(function(e){
var $divs = $(".row-artigo");
var ordenadoDiv = $divs.sort(function (a, b) {
return $(b).find('.qtd-voto').text() - $(a).find('.qtd-voto').text();
});
$("#container-artigos").html(ordenadoDiv);
$(".row-artigo").wrapAll($('<div class="article-post">'));
}));
Any idea why is it happening?
$("#container-artigos").html(ordenadoDiv) replaces existing DOM content, effectively removes all associated event listeners. See https://api.jquery.com/html/#html-htmlString for explaination.
Register event listener on document will prevent that
$(document).on("dblclick", "span.artigo", function(e) {
....
});
Wanna see if it works?
I currently have a a parent div and a child div in the middle of the parent div. I want to be able to close the parent div only on clicking outside of the child div. How would I go about doing this? I have my code currently set up as below, with the triggerParentUpdate to set true or false whether to show div.
<div onClick={this.props.triggerParentUpdate} className="signupModalContainer">
<div className="embed-responsive embed-responsive-16by9">
<form action="action_page.php">
<div className="container">
<button onClick={this.props.triggerParentUpdate} type="button" className="closebtn">X</button>
</div>
</form>
</div>
</div>
the onclick function in the first div (className="signupModalContainer") makes it so that when I click that div or any of the child divs, all the divs close. if I take that onclick function out, then the divs close via the closebtn.
Thank you!
Create a handler for the child div's onClick event handler, which stops the propagation/bubbling up of the event to the parent.
Refer to Event.stopPropagation method for more info.
class SomeComponent extends Component {
handleCloseButton = e => {
// This stops the event from bubbling up.
// So it won't trigger the parent div's "onClick" to fire.
e.stopPropagation();
this.props.triggerParentUpdate(e);
}
render () {
// ...
return (
<div onClick={this.props.triggerParentUpdate} className="signupModalContainer">
<div className="embed-responsive embed-responsive-16by9">
<form action="action_page.php">
<div className="container">
<button onClick={this.handleCloseButton} type="button" className="closebtn">X</button>
</div>
</form>
</div>
</div>
);
}
)
So I have nested DIVs and a simple version can be shown like this:
$('#parent').click(function() {
$('.parent').modal('show');
});
$('#child').click(function() {
$('.parent').modal('hide'); // Added to try and hide
$('.child').modal('show');
$('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">
</div>
</div>
The thing is when I click on the child div, the parent dialog also shows up behind the child dialog.
Any way to get around this?
It is happending because your child click event is bubbling up to the parent. Use e.stopPropogation() for the child div. This will prevent your click event from propogating to the parent.
$('#parent').click(function() {
$('.parent').modal('show');
});
$('#child').click(function(e) {
e.stopPropogation();
$('.parent').modal('hide'); // Added to try and hide
$('.child').modal('show');
$('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">
</div>
</div>
You can deal with such cases easily by mentioning the target in an attribute like below.
$('#parent, #child').click(function() {
var target = $(this).data('target');
$('.'+target).modal('show');
// write code to hide others if necessary
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent" data-target="parent">
<div id="child" data-target="child">
</div>
</div>
Try this before showing the modal:
$( '.modal' ).remove();
$( '.child' ).modal('show');
Remove the modal before using show. Hope this will fix your issue
I'm trying to add custom "options" icon to the event. I want that if i click on this icon, small tooltip appears. But if i click on this icon, eventClick is triggered.
This is my html
<div class="fc-event-content">
<div class="fc-event-title" style="float: left">
<div class="title_info" id="prvni_radek">Text on row one</div>
<div class="title_info">Text on row two</div>
</div>
<div class="tecky"><img src="./image/tecky.png"></div>
</div>
I tried this JS
<script>
$(".tecky").on("click", function(event){
event.stopPropagation();
alert("test");
});
</script>
event.stopPropagation(); i found in this article but it won't help
Try use event.preventDefault(). It should help you.
if event.stopPropagation() does not work, give the below a try
$( '#outer' ).click ( function ( event ) {
if ( $( event.target ).is( '#inner' ) ) {
//code if inner got clicked
} else {
//code if outer got clicked
}
}
I have a dropdown menu activated on click.
I use toggle to activate it when you click on the .hello_panel
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello </div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
jQuery
$('.hello_panel').bind('click', function(){
$('.menu_popup').toggle();
})
if I click it it works fine, it does the show and hide effect when the .hello_panel
is clicked.
what I want is it to be shown if the .hello_panel is clicked and hidden back if when clicking anything else on the page except the .menu_popup
You can hide it whenever you click on the document
JavaScript
$(document).click(function () {
$('.menu_popup:visible').hide();
});
$('.hello_panel').bind('click', function (e) {
$('.menu_popup').toggle();
e.stopPropagation();
});
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello</div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
<div style="display:none" class="menu_popup">menu_popup</div>
Demo
http://jsfiddle.net/6bo1rjrt/16/
Another way if you don't want to stopPropagation is passing a call back function that registers a once time click listener to that document to hide the menu
$('.hello_panel').bind('click', function () {
$('.menu_popup').show(function () {
$(document).one('click', function () {
$('.menu_popup:visible').hide();
});
});
});
Demo
http://jsfiddle.net/6bo1rjrt/17/