Jquery mousedown/mouseup prevent click

3
votes

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

3
javascriptjqueryclickmousedownmouseup
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

3 Answers

3
votes

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/

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

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