I have set an "onmousedown" event handler for the body of my page. In this page there are some div elements, is it possible to ignore the clicks on these divs, and to just fire the onmousedown event handler of the body with the correct coordinates, as if the divs were not present?
If you want a click on a div to result in nothing, use this CSS declaration:
div {
pointer-events: none;
}
or use this to stop any event from firing by a click on a div:
$('div').click(function(e) {
e.stopPropagation();
});
Add a custom class to the div elements you want to ignore clicks (let's say, ignore-clicks):
div.ignore-clicks {
pointer-events: none;
}
Yes, add stopPropagation(); to your divs to stop the click event from bubbling.
$("div").click(function(e) {
e.stopPropagation();
});
Sample to avoid click on div
$("body :not(div)").click(function(){alert("Test")})
as u use jquery
$(document).ready(function() {
$('body').click(function(e) {
if (e.target == this) {
alert('Parent was clicked');
}
});
});
https://jsfiddle.net/1ox8akcx/1/
You can also use event.target to determine where the user has clicked. Just ad the following snippet inside your event-listener for the body:
if($(e.target).is('div')){
return false;
}
Demo
The .is() can of course be used with specific classed or other selectors.
Demo 2
Reference
.is()
Try this: http://jsfiddle.net/eaL53d62/1/
(function(){
$('#body').on('mousedown', ':not(.not-clickable)', function(e){
alert('clicked');
});
}());
Specifically, using the :not() selector will ignore specific elements
Related
I am trying to do something ostensibly simple in jsfiddle and it is not working. Essentially I have an h1 html tag with class "me" and a button with class "poo". The first click works and my css color changes, however the second click does not work?
$(".poo").click(function(e){
e.preventDefault();
$(".me").css("color","green");
var haha = $("<button>Click Me!!!</button>");
$(this).after(haha);
$(haha).addClass("changer");
$(this).hide();
});
$(".changer").click(function(e){
e.preventDefault();
$(".me").css("color","black");
$(this).hide();
});
Bind the second click to the parent element:
$(document).on('click', '.changer', function() {
//function here
});
The changer click handler is bound before the element exists. Try using the $.on method instead.
http://api.jquery.com/on/
$('body').on('click', '.changer', function() {...})
This works because the event handler is bound to the document body, which already exists on the page. When there is a click anywhere in the body, jQuery will check if the clicked element matches the selector .changer and execute the callback if so.
Alternatively, you could just bind the $('.changer').click event within the first callback.
Update fiddle: http://jsfiddle.net/0yodg7gb/7/
$(".poo").click(function(e){
e.preventDefault();
$(".me").css("color","green");
var haha = $("<button>Click Me!!!</button>").addClass('changer');
$(this).after(haha);
$(haha).addClass("changer");
$(this).hide();
bindClick();
});
function bindClick(){
$(".changer").bind('click',function(e){
e.preventDefault();
$(".me").css("color","black");
$(this).hide();
});
}
i just wanna ask if there's something like "if clicked arround" in jQuery, i mean, if clicked any element in the page except for one element, or if there a way to make that easily.
You can try this:
$(document).on("click", function(event) {
if($(event.target).parents().index(yourElement) == -1) {
// your code here
}
});
Yes you can use .not()
event.stoppropagation
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
$('#divID').not('#ElID').click(function(){
//* code here */
});
Or
:not()
$('#divID:not("#ElID")').click(function(){
//* code here */
});
Start Reading jQuery API Documentation and Learning
Updated After OP's comment.
Fiddle Demo
event.target and .is()
$('#divID').click(function (event) {
if (!$(event.target).is('#ElID')) {
alert('Work');
}
});
Fiddle Demo
Works on click anywhere except element with id ElID
$('html').click(function (event) {
if (!$(event.target).is('#ElID')) {
alert('Work');
}
});
So I have a parent div with different elements inside. Right now I have it set up so when that parent div is clicked, it applies a "selected" css attribute (just highlights it). However, there is an anchor tag inside this div and I don't want the div to highlight if the anchor is clicked.
My code to highlight the div
$(document).on("click",".playlist-row",function() {
var selected = $(this);
highlight(selected);
});
Ideally, I want it to behave like this: (just pseudo code)
$(document).on("click",".playlist-row",function() {
var selected = $(this);
if ($(".childElement) is not the part clicked) {
selectSongInPlaylist(selected);
}
});
Any elegant ways to get something like this to work?
You could use stopPropogation() as in http://api.jquery.com/event.stopPropagation/ on the child elements like $('.childElement').click(function(e){
e.stopPropagation();
}); to prevent the click event propagating to the parent element. You could also check the event.target property as described here http://api.jquery.com/event.target/
you need to prevent the click event bubbling up to the container
capture the event and use event.stopPropagation
$(document).on('click', "a", function(event){
event.stopPropagation();
});
I will assume that I understood your question, so here's what I would probably do:
$(document).on("click", ".playlist-row", function(e) {
if (!$(e.currentTarget).is("a")) {
selectSongInPlaylist($(this));
}
}
I'm trying to get a .click() event to work on a div.content except if clicked on something with a specific class, say, .noclick. Example html:
<div class="content">
<a href="#" class="noclick">
</div>
Doing this doesn't work because the <a> tag is not technically in the selection:
$('.content').not('.noclick').click(function(){/*blah*/});
How can I get the click function to work if I click anywhere on .content except something with class .noclick?
You'd have to exclude them from within the callback:
$('.content').click(function(e) {
if ($(e.target).hasClass('noclick')) return;
});
Or stop the event from leaving those elements:
$('.noclick').click(function(e) {
e.stopPropagation();
});
I would go with the second one. You can just drop it and your current code (minus the .not()) will work.
$('.content').click(function(event) {
// ...
}).find('.noclick').click(function(event) {
event.stopPropagation();
});
$('.content').click(function(e){
if(!$(e.target).is('.noclick')){
// Handle click event
}
});
$('.content').
on('click', '.noclick', function(){return false;}).
click(function(){alert("click")})
cancels clicks on '.noclick', yet fires clicks elsewhere
http://jsfiddle.net/FshCn/
I would like to know if some one can improve my code... Using jQuery I'm trying to apply a class on the element we just click and disable this class on the other elements.
You will se in my code that I'm trying to apply a class on the I just clicked and remove all the class on the others elements.
But for the moment, I'm doing it the "easy and mega long way" as you can see in $("choice1-1").click(function()
Can some help me with a code that could detect all the others ID ?
Here my code for the moment
$(document).ready(function()
{
$('#stick-question-1').mouseenter(function()
{
$('#stick-choices-1').show();
});
$('#stick-choices-1').mouseleave(function()
{
$('#stick-question-1').show();
$('#stick-choices-1').hide();
});
$("choice1-1").click(function()
{
$(this).addClass('hover-etat');
$("#choice1-2").removeClass('hover-etat');
$("#choice1-3").removeClass('hover-etat');
$("#choice1-4").removeClass('hover-etat');
});
});
And my HTML is like this
<div id="stick-choices-1" class="stick-choices">
Under 3'9
4' to 5'2
5'3 to 5'7
5'8 and more
</div>
Just use:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
I've changed your initial selector, so that the click event is triggered by clicking any of the links within the #stick-choices-1 div element, it prevents the default action of clicking the link (assuming that you want the default to be stopped), removes the hover-etat class from any element that has that class, and then applies that class-name to the this element.
It may, though, make sense to restrict the scope in which jQuery searches for elements with the hover-etat class, to those elements within the same #stick-choices-1 element, rather than the whole document:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('#stick-choices-1 .hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
Or:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
It will works fine :
$("#choice1-1").click(function(){
$(".stick-choices a").each(function(){
$(this).removeClass(".hover-etat");
});
$(this).addClass(".hover-etat");
});
This should do it, and registers this handler for all of the links.
$('#stick-choices-1 > a').click(function(ev) {
$(this).addClass('hover-etat').siblings().removeClass('hover-etat');
...
});
Note the use of .siblings() to ensure that only the links that are in the same group are affected, and without sending an unnecessary class change to the clicked link.
This click event will work for all of the choices:
$('.stick-choices a').click(function(e){
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
$("a", $("#stick-choices-1")).click(function(){
$(".hover-etat").removeClass('hover-etat');
$(this).addClass('hover-etat');
});
May be something like this?
$('div.stick-choices a').on('click', function(e) {
e.preventDefault();
$(this).addClass('hover-etat').siblings('a').removeClass('hover-etat');
});