Jquery mousedown/mouseup prevent click

Question

My page is built like that:

<table>
    <thead>
        <tr>
            <th>
                  Test
                  <div class="drag"/>
            </th>
            <th>
              ......
              ......
            </th>
        </tr>
    </thead>
</table>

.drag {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: yellow;
    width: 3px;
}

The intention is to drag the width of the my colums with mousedown/mouseup-events on the <div class="drag"/> and it works nice. But there's also a click event on my <th>-elements. The problem is, when I release the mouse still on the <th>, the click event still of <th> triggers.

I've tried several things:

stopPropagation() on almost every event that's there
return false in the mousedown event
unbind the click event in mousedown and bind it again in the mouseup event

Is there any other way to prevent the click-event?

Edit: I still want to keep the click-event on that <th> but I dont want it to start after i've dragged

Please add a mcve from your code so we can see it working (even if it's with dummy actions). Right now, you don't show any script (and the question has only script tags), and the CSS doesn't match the posted HTML — Alvaro Montoro
– Alvaro Montoro, Commented May 6, 2015 at 12:09

domitall · Accepted Answer · 2015-05-05 15:27:16Z

3

Have you tried

event.stopImmediatePropagation();

This will call stopPropagation, but also prevents other handlers within the same element from receiving the event.

http://api.jquery.com/event.stopimmediatepropagation/

answered May 5, 2015 at 15:27

domitall

6555 silver badges15 bronze badges

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

Comments

Josh Stevenson · Accepted Answer · 2015-05-05 15:06:53Z

1

$('th').click(function(e){
    e.preventDefault();
}

answered May 5, 2015 at 15:06

Josh Stevenson

9055 silver badges18 bronze badges

4 Comments

Alvaro Montoro Over a year ago

Wouldn't this stop the desired click event even when the user is not drag-n-dropping?

Josh Stevenson Over a year ago

well, yeah. but he asked "Is there any other way to prevent the click-event?"

Yukuza Over a year ago

i still want to keep the click event, but i dont want it to start when i try to drag

Yukuza Over a year ago

I've tried everything and now I ended up with setting a short timeout, where I set a var dragged as false and check that one in the click event

Alvaro Montoro · Accepted Answer · 2015-05-05 16:32:28Z

0

You could set a flag variable when the drag starts (ondragstart), then when it ends (ondragend) you would unset it, and the onclick would be wrapped in an if condition that would check that flag.

Something like this (you'd need to adjust it to your code):

var dragndrop = false;

$(".drag").on("dragstart", function(e) {
    dragndrop = true;
    // ...code here if needed...
});

$(".drag").on("dragend", function(e) {
    dragndrop = false;
    e.preventDefault();
    // ...code here if needed...
});

$("th").on("click", function() {
    if (!dragndrop) {
        // ... your code here 
    }
});

edited May 5, 2015 at 16:32

answered May 5, 2015 at 15:14

Alvaro Montoro

30k7 gold badges68 silver badges92 bronze badges

2 Comments

Yukuza Over a year ago

i'm working with the mousedown and mouseup events. sadly the click events starts after the mouseup and the dragndrop variable is set to false :(

Alvaro Montoro Over a year ago

Have you tried keeping your code in the mousedown and mouseup but adding the dragstart and dragend just to set/unset the dragndrop flag?

Collectives™ on Stack Overflow

Jquery mousedown/mouseup prevent click

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related