I have ul tag inside div tag. I have applied mouseup event on div tag and click event on ul tag.
Issue
Whenever I click ul tag, then both mouseup and click events are triggered.
What I want is that when I click on ul tag, then only click event should trigger and if I do mouseup event on div tag, then only mouseup event should trigger.
My code:
HTML:
<div class="m1">
Nitin Solanki
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
JS:
$(document).on('mouseup', '.m1', function(){
alert('div mouseup ');
});
$(document).on('click', 'ul li', function(){
alert("ul li- clicked");
});
JSFIDDLE
You can stop the propagation of the event
$(document).on('mouseup', '.m1', function() {
alert('div mouseup ');
});
$(document).on('mouseup', '.m1 ul', function(e) {
e.stopPropagation()
});
$(document).on('click', 'ul li', function() {
alert("ul li- clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="m1">
Nitin Solanki
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
You can use jQuery's is() to check if the clicked element is a div or a list:
$(document).on('mouseup', '.m1', function(event){
// Check if the clicked element is the div and not the list
if($(event.target).is('div'))
alert('div mouseup ');
});
$(document).on('click', 'ul li', function(){
alert("ul li- clicked ");
});
The reason is event bubbling. You can handle this using event.stopPropagation();
$(document).ready(function(){
$("ul li").click(function(event){
event.stopPropagation();
alert("The ul li element was clicked.");
});
$(".m1").click(function(){
alert("The div element was clicked.");
});
});
It's a strange question, as part of a "click" is actually a mouseup.
A click comprises of a mousedown followed by a mouseup on the same element.
The only thing I think you could do here is to store when a click has started, and add a onesecond timeout to a variable that the mouseup event depends on.
Like this. (I feel dirty even posting this).
var clickStarted = false;
$(document).on('click', 'ul li', function(){
alert("ul li- clicked");
clickStarted = false;
});
$(document).on('mousedown', 'ul li', function(){
clickStarted = true;
setTimeout(function(){ clickStarted = false; }, 1000);
});
$(document).on('mouseup', '.m1', function(){
if(!clickStarted)
alert('div mouseup ');
});
JSFiddle
Related
I am having some click events(more than 100) in my JS file, and for example code looks like this.
$(document).on('click', '.a', function(){
alert($(this).text());
});
$(document).on('click', '.b', function(){
alert($(this).text());
});
$(document).on('click', '.c', function(){
alert($(this).text());
});
$(document).on('click', '.d', function(){
alert($(this).text());
});
This is just example code, my Click events doing a lot of things, and I can not change the click event code,
Now I have a Boolean which I am getting from a Function based on some condition.
So On first click I want to see if this variable is True then only my click event on particular item should trigger, else click event should not trigger.
let tre = false;//it could be true or false based on function given below based on some condition.
function test(){
return tre;
}
$(document).on('click', '.a', function(){
alert($(this).text());
});
$(document).on('click', '.b', function(){
alert($(this).text());
});
$(document).on('click', '.c', function(){
alert($(this).text());
});
$(document).on('click', '.d', function(){
alert($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="a">a</div>
<br>
<div class="b">b</div>
<br>
<div class="c">C</div>
<br>
<div class="d">d</div>
</section>
Now my Requirement is if I click on any item in the page (a,b,c,d) and if that varibale tre is TRUE then only my alert should work.
I can wrap all my click events in a function if needed, but can't add if condition inside every click event.
I'm trying to select a div for a click event but not the inputs within said div. I thought this would do it but it does not work. here is a demo. Thank you
html
<div id = "test"><input></div>
js
$('#test:not(input)').click(function(){
alert();
});
You could check to see if the clicked element is an input element using !$(e.target).is('input')
Updated Example
$('#test').on('click', function (e) {
var $target = $(e.target);
if (!$target.is('input')) {
alert('clicked');
}
});
When you click on the input, the click event bubbles to the div above it.
You can stop this by calling stopPropagation or stopImmediatePropagation on the event object.
http://jsfiddle.net/t66f06oL/1/
$( '#test' ).on( 'click', function() {
alert();
} );
$( '#test' ).on( 'click', 'input', function( e ) {
e.stopImmediatePropagation();
} );
When you click on the input control your click event is actually caught by the parent div. You can fix this by changing your code to this:
$('#test:not(input)').click(function(){
alert();
});
$('#test').find('input').click(function(e){
e.stopPropagation();
});
I like to know how to get the id of li when i right click over this li using javascript or jquery.
<ul>
<li id="liid" class="collapsable">
<div class="hitarea collapsable-hitarea">
</div>
<span class="folder">Group1.2</span>
</li>
</ul>
I have the right click function.
$(document).bind("contextmenu", function (e) {
// code to get the id of current li
});
Can any one help me please.
Use .on('contextmenu', 'li')
$(function() {
$('ul').on('contextmenu', 'li', function(e) { //Get li under ul and invoke on contextmenu
e.preventDefault(); //Prevent defaults
alert(this.id); //alert the id
});
});
Demo
This uses event delegation on document and only fires if an li is clicked.
$(document)
.on('contextmenu', 'li', function(e) {
e.preventDefault();
console.log(this.id);
});
Compared to adding a handler on $('ul') or $('li'), this will only bind a single handler.
You can try this
$(function() {
$('li').on("contextmenu", function (e) {
alert(this.id);
e.preventDefault();
});
}
Demo
You can use this..
If you want open also Context Menu on right click then use below code:
$(function() {
$('ul li').on('contextmenu', function() {
alert(this.id);
});
});
and without Context Menu then use below code:
$(function() {
$('ul li').on('contextmenu', function(e) {
e.preventDefault();
alert(this.id);
});
});
Happy New year...
Click on the document, the .area div disappears.
$(document).on('click', function() {
$('.area').hide();
});
$(document).off('click', '.red', function(e) {
e.stopPropagation();
});
In this case, how can I apply stopPropagation to .red. I'd like to keep this js format, as I will need to add more class names.
Online Sample http://jsfiddle.net/ku9cj/1/
Thanks
off() is used to remove the event handler; you need to use .on()
$(document).on('click', '.red', function(e) {
e.stopPropagation();
});
Demo: Fiddle
You should not attach handlers to the document, as they bubble up very slowly. If you must do so, try the following:
$('body').on('click', function() {
$('.area').hide();
});
$('.red').on('click', function(e) {
e.stopPropagation();
});
Or, if you insist on using a delegate and do not have a closer parent element:
$('body').on('click', '.red', function(e) {
e.stopPropagation();
});
In situations where multiple event handlers are operating on a single element and action, how can I force only one of the events to fire? JSFiddle.
$("#buttons").on("click", "button", function(){
// only do this if the event below isn't fired
});
$("#buttons").on("click", "button.red", function(){
// if this one happens, don't do the above one
});
For a more general solution, event.stopImmediatePropagation() will prevent the event from triggering any more handlers. For handlers bound to the same element, the order they are bound seems to matter. You could also bind the one that you conditionally don't want to fire to an element higher in the DOM and use e.stopPropagation():
$(document).ready(function(){
$("#buttons").on("click", ".red", function(e){
e.stopImmediatePropagation();
$(this).css("color","red");
});
$("#buttons").on("click", "button", function(){
$(this).css("background","blue");
});
});
http://jsfiddle.net/Ef5p7/
Here's how you could use stopPropagation() instead:
<div id="buttonsOuter">
<div id="buttons">
<button>turn blue</button>
<button class="red">only turn text red</button>
<button>turn blue</button>
<button>turn blue</button>
<button>turn blue</button>
</div>
</div>
...
$(document).ready(function () {
$("#buttons").on("click", ".red", function (e) {
e.stopPropagation();
$(this).css("color", "red");
});
$("#buttonsOuter").on("click", "button", function () {
$(this).css("background", "blue");
});
});
http://jsfiddle.net/CwUz3/
Change the first event handler to:
$("#buttons").on("click", "button", function(){
$(this).not('.red').css("background","blue");
});
jsFiddle example
$("#buttons").on("click", "button, button.red", function(){
// if this one happens, don't do the above one
});
Try using :not() http://api.jquery.com/not-selector/
$(document).ready(function(){
$("#buttons").on("click", "button:not(.red)", function(){
$(this).css("background","blue");
});
$("#buttons").on("click", "button.red", function(){
$(this).css("color","red");
});
});
Here's the working fiddle:
http://jsfiddle.net/SpFKp/4/
Try this,the functions will be called but you can add condition to not run the code:
var functionCalledFlag =false;
$("#buttons").on("click", "button", function(){
if(!functionCalledFlag ){
functionCalledFlag =true;
// only do this if the event below isn't fired
}else{
functionCalledFlag =false;
}
});
$("#buttons").on("click", "button.red", function(){
if(!functionCalledFlag ){
// only do this if the event above isn't fired
functionCalledFlag =true;
}else{
functionCalledFlag =false;
}
});