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

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

• javascript
• jquery
• click
• mousedown
• mouseup

Share Improve this question Follow edited May 6, 2015 at 12:55 Yukuza asked May 5, 2015 at 15:04 YukuzaYukuza 5322 silver badges55 bronze badges 1

• 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 Commented May 6, 2015 at 12:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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./event.stopimmediatepropagation/

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

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