Enable only Click event inside mouseup event Jquery

Question

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

post your code in the question... not just a fiddle link

Arun P Johny
– Arun P Johny

2015-07-21 08:45:19 +00:00
Commented Jul 21, 2015 at 8:45 — Arun P Johny
– Arun P Johny, Commented Jul 21, 2015 at 8:45

Arun P Johny · Accepted Answer · 2015-07-21 08:49:35Z

2

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>

answered Jul 21, 2015 at 8:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sampie777 · Accepted Answer · 2015-07-21 08:46:26Z

1

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 ");
});

answered Jul 21, 2015 at 8:46

sampie777

1437 bronze badges

Comments

Raghvendra Kumar · Accepted Answer · 2015-07-21 09:13:19Z

1

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.");
        });
    });

answered Jul 21, 2015 at 9:13

Raghvendra Kumar

1,4181 gold badge11 silver badges27 bronze badges

Comments

DrLazer · Accepted Answer · 2015-07-21 10:27:58Z

0

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

edited Jul 21, 2015 at 10:27

answered Jul 21, 2015 at 8:58

DrLazer

3,2234 gold badges44 silver badges56 bronze badges

Collectives™ on Stack Overflow

Enable only Click event inside mouseup event Jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related