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](http://stackoverflow.com/help/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, May 06 '15 at 12:09

score 3 · Answer 1 · answered May 05 '15 at 15:27

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 05 '15 at 15:27

domitall

655
5
15

score 1 · Answer 2 · answered May 05 '15 at 15:06

1

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

answered May 05 '15 at 15:06

Josh Stevenson

895
5
17

Wouldn't this stop the desired click event even when the user is not drag-n-dropping? – Alvaro Montoro May 05 '15 at 15:09
well, yeah. but he asked "Is there any other way to prevent the click-event?" – Josh Stevenson May 05 '15 at 15:13
i still want to keep the click event, but i dont want it to start when i try to drag – Yukuza May 05 '15 at 20:31
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 – Yukuza May 06 '15 at 08:36

Alvaro Montoro · Answer 3 · 2015-05-05T16:32:28.230

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 05 '15 at 16:32

answered May 05 '15 at 15:14

Alvaro Montoro

28,081
7
57
86

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 :( – Yukuza May 06 '15 at 06:12
Have you tried keeping your code in the `mousedown` and `mouseup` but adding the `dragstart` and `dragend` just to set/unset the dragndrop flag? – Alvaro Montoro May 06 '15 at 12:06

Jquery mousedown/mouseup prevent click

3 Answers3

Linked