I'm developing a web page using jQuery. In this web page, there is a div tag that contains a p and a button tag.
The HTML code is like this:
<div class="container">
<div id="attribute" style="border:solid;border-width:2px;border-color:#ccc">
<p id="cell-content" style="display:inline">Id</p>
<button id="remark-view" class="btn btn-primary">Detail</button>
</div>
</div>
and the corresponding JavaScript code is like this:
$(document).ready(function(){
$("#attribute").on('click', function(){
console.log("click on the div attribute");
});
$("#attribute").on('dblclick', function(){
console.log("double click on the div attribute");
});
$("#remark-view").on('click', function(){
console.log("click on the button remark-view");
});
});
As the code shows, a outer div has a p and button child element, and the outer div element listens on the single click and double click event while the inner button element listens on the single click event.
When I run the code in my browser and click on the button, the console shows that both click functions of the outer div and inner button element are called, which is against my purpose: only the click function of inner button should be called at this situation. Thus, is there any way to block the click event for the father element(in this case, outer div element).In other words, is there any way to stop passing the click event to the father element after the child element has handled it?
Thank you in advance!
stopPropagation function will stop the event from bubbling up the DOM.
$("#remark-view").on('click', function(event){
console.log("click on the button remark-view");
event.stopPropagation()
});
From the jQuery documentation
Prevents the event from bubbling up the DOM tree, preventing any
parent handlers from being notified of the event.
This is something I use in one of my sites to do something similar to your problem. What the below code does is it prevents the middle div from closing if the button click is on that div.
//Function for the pop up with the background dimmer
$(document).mouseup(function(x) {
var container = $("#divContent"),
dimmer = $('#bgDimmer');
if (container.is(":visible")) {
if (!container.is(x.target) //check if the target of the click isn't the container...
&& container.has(x.target).length === 0) {
container.hide();
dimmer.hide();
}
}
});
Let try to relate to your code.
//Function for the pop up with the background dimmer
$(document).mouseup(function(x) {
var attribute = $('#attribute');
if (attribute.is(":visible")) {
if (!attribute.is(x.target) //check if the target of the click isn't the container...
&& attribute.has(x.target).length === 0) {
console.log("click on the button remark-view");
}
}
});
Related
I have a toggle event on a div, and I've seen many questions regarding mine but nothing seems to work for what I'm trying to do, it either makes my div disappear in a few seconds, or it just doesn't work. Here's my jsfiddle.
I have a div that needs to toggle when another <div> is clicked. The toggled div has inputs in it that need to be filled out, and a submit button inside it as well. So I need clicks inside the div to be allowed, but only inside my div. So I want the div to show unless the user clicks outside of this div.
I'm using this query which toggles fine:
$('#MyDiv').click(function (event) {
$("#ToggledDiv").slideToggle();
});
And then this coding to hide it when clicked outside of the div which doesn't work:
$(window).click(function () {
$("ToggledDiv").hide();
});
I've tried solutions with e.preventDefault(); but that doesn't work, or $(document).click, even mousedown but it just doesn't flow how I want, it'll hide it within a few seconds, or it will prevent the toggle from even working so I'm lost.
The reason behind this behavior is Event Bubbling and Capturing of HTML DOM API. You can use event.stopPropagation() OR event.cancelBubble = true to prevents the event from bubbling up to the DOM tree, preventing any parent handlers from being notified of the event.
Another good article: events order
$('#MyDiv').click(function(event) {
$("#ToggledDiv").show();
disabledEventPropagation(event);
//console.log('2nd event');
});
$('#ToggledDiv').click(function(event) {
disabledEventPropagation(event);
//console.log('3rd event');
});
$(document).click(function() {
$("#ToggledDiv").hide();
//console.log('1st event');
});
function disabledEventPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MyDiv" style="background-color:yellow">
click me to open
</div>
<div id="ToggledDiv" style="display: none;background-color:yellow">
<input type="text" />
<input type="submit" />
</div>
Take a look at the event when you click inside the #targetDiv. There are two properties you can use to evaluate what action to perform: event.target and event.currentTarget. In this case:
$('#ToggledDiv').on('click', function(event) {
console.log(event.target, event.currentTarget);
});
This is a good way to see if what clicked is actual target or a child element in the target.
To add to Chris' answer, you can see here that I check that the e.target is not inside the form using vanilla Node.contains, and also not the button...
https://jsfiddle.net/jmLdp45s/3/
var $button = $('button');
var $form = $('form');
$button.click(function() {
$form.slideToggle();
});
$(window).click(function(event) {
if (
!$form.get(0).contains( event.target ) // target is not inside form
&& event.target !== $button.get(0) // target is not button
) $form.hide();
});
I have several DIV of the following kind on my page:
<div class='entry'>
This is a statement
<a title="Search #travel" class="app-context-link" href="">#travel</a>
</div>
When a DIV of class .entry is clicked I trigger the following:
$(".entry").on('click', function(e) {
console.log("DIV Clicked");
});
When a link of the class .app-context-link is clicked I trigger the following:
var context_links = document.getElementsByClassName('app-context-link');
for (var k=0;k<context_links.length;++k) {
context_links[k].addEventListener('click', function(e) {
console.log("The context link inside DIV is clicked");
});
}
The question:
Right now when I click on the app-context-link both actions seem to be triggered: for the DIV (because a .click event is detected) and for the link (because there's an event listener on a link of that class).
How do I make it that if the link is clicked the DIV on click jQuery is not triggered?
I tried several possibilities, nothing worked. Also I would prefer not to reorganize the code too much, but simply add some directive in the on click jQuery part so that it detects if a link was clicked and does not do what it would normally do if the DIV was clicked.
Thank you!
you can use like this
$(".entry").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$(".entry a").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).prop("tagName"));
});
DEMO
Use stop propagation :
context_links[k].addEventListener('click', function(e) {
e.stopPropagation(); //Here
console.log("The context link inside DIV is clicked");
});
This will stop the click event from bubbling, so when you click on the a, click events of its ancestor will not trigger.
I write simple overlay for my page, kind of lightbox, but is going to do other stuff, anyway, My bigger problem in this tests... is I want when you click the overlay mask, the overlay close... But if you click in the children div, like the content div inside the overlay the overlay must remain open.. (which is not, that's the problem)
http://jsfiddle.net/7Cr2V/
How can I say in Javascript, if I click a child div of "overlayfull" please do not close or hide the overlayfull ... here is my code.. and above is the js fiddle if you want to check it cause my English is very bad.
$('div.vidreveal a').click(
function(event) {
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
$('div.my-video-close').click(
function(event) {
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
$('div.overlayfull').click(
function(event) {
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
One solution is to add a click handler to the children, in which you stop propagation:
$('div.overlayfull').children().click(function(event){
event.stopPropagation();
});
stop propagation only works for parent elements it doesnt not stop the active element itself. you can encompass the text with a class and return false if clicked on that
<div id='my-video'></div>
<div class="message">CLIC HERE MUST NOT CLOSE THE OVERLAY</div>
</div>
if (event.target.className === 'message')
return false;
http://jsfiddle.net/59trN/
I think this is the simplest way to do it if I understand the question correctly. I just check within your handler to see if the div getting clicked on is the one you don't want to close the modal, and return from the function before the fadeout is triggered:
$('div.overlayfull').click(
function(event) {
if ($(event.target).hasClass('videoquon')){
return;
}
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
Check out the fiddle http://jsfiddle.net/aRDKS/
Either have an event for the divs inside overloay div and stoppropagation on that. Inorder to stop the Propagation of event occurring on the children of a parent which has that particular event's handler, either check for the target from where the event generated in the paent handler or add a handler for the children and apply event.stopPropagation() to avoid the event bubbling up to the parent.
$('div.overlayfull div').click(function (e) {
e.stopPropagation()
});
or check for the target's id from which the event was generated:
function (event) {
if (event.target.id == 'overlayfull') { // Check here if the event originated from the intended div itself
$('div.videoquon').fadeToggle(300);
$(this).fadeToggle(300);
}
});
Fiddle
I have a div that slides down (opens) when I click a certain input select. Inside this div, I have some other input selects and my objective is to slide up the div when I click on the rest of the page.
My problem:
The div slides up when I select some item in the input selects inside it, and I don't want this to happen.
Is there some way to slide up the div only when I click outside it?
Why are the selects inside the div making it to slide up as well?
This is my javascript to slide up the div:
$(document).mouseup(function (e) {
var container = $('.myDiv');
if (container.has(e.target).length === 0) {
$(container).removeClass('close');
$(container).addClass('open');
$(container).next().slideUp(200);
}
});
The div slides up when I select some item in the input selects inside
it, and I don't want this to happen.
Is there some way to slide up the div only when I click outside it?
Why are the selects inside the div making it to slide up as well?
Use event.stopPropagation() on the child element(s) to prevent the slide event being triggered by them.
event.stopPropagation - Prevents the event from bubbling up the DOM
tree, preventing any parent handlers from being notified of the event.
Here's a simple jsFiddle and the basic example below.
jQuery:
$('div').click(function(){
$('#slideMeUp').slideUp();
});
$('select').click(function(e){
e.stopPropagation();
});
HTML:
<div>Clicking here will trigger it!
<select>
<option>This won't trigger the click event anymore!</option>
</select>
Clicking here will also trigger it!
</div>
<div id="slideMeUp">Only clicking the outer div will slide me up!</div>
you can check you e.target.id with your container id
$(document).mouseup(function (e) {
var container = $('.myDiv');
if(e.target.id==$(this).attr('id'))
{
if (container.has(e.target).length === 0) {
$(container).removeClass('close');
$(container).addClass('open');
$(container).next().slideUp(200);
}
}
});
If it's specific items that are causing problems, perhaps something like this?
On click tell it to to slideUp your div as long as the clicked item is "not" in the list.
('body').click(function(event) {
if (!$(event.target).is('#id_of_item .class_to_ignore')) {
var container = $('.myDiv');
$(container).removeClass('close');
$(container).addClass('open');
$(container).next().slideUp(200);
}
});
I'd suggest binding mousedown rather than mouseup. There are inconsistencies in behaviour between browsers, this may have something to do with your issue.
You should also add some logic to check the clicked element isn't the div itself, clicking just outside of an input, but still inside of the div would currently cause the slideUp to occur.
if (!container.has(e.target).length && !container.is(e.target)) {
...
}
Other than that, it should work fine.
Have a fiddle
I've a HTML div and I want to hide it whenever the user clicks on the page anywhere outside the div. Which clicking on which element should I trigger the onclick event??
$('#mydiv').click(function(e) { e.stopImmediatePropagation(); });
$(document.body).one("click", function() {
$('#mydiv').hide();
});
Since mydiv is also a child of the body element, you don't want that when clicking on that element, the element would dissappear.
So when people click on the mydiv, you want it to stop bubbling up to the body element, that is why first you register a click event on your mydiv, and tell it to stop bubbling.
Assuming you're using the latest jQuery, v1.4.4:
$(<the div you want hidden>).click(false); //stop click event from bubbling up to the document
$(document).one('click', function(){
$(<the div you want hidden>).hide(); //which will hide the div
});
In other words, this code says 'hide the div if you click on this page, unless you click on the div'.
Re: Toggle button
Then you'll have something like:
$('button').click(function(){
$('div').toggle();
});
$('div').click(false);
$(document).click(function(){
$('div').hide();
//reset the toggle state, e.g.
$('button').removeClass('selected');
});
The BODY element.