#4219 closed bug (notabug)
Can't bind events to a table row after it has been made selectable
Reported by: | jeffreybolle | Owned by: | |
---|---|---|---|
Priority: | major | Milestone: | 1.9.0 |
Component: | ui.selectable | Version: | 1.6rc6 |
Keywords: | selectable, events | Cc: | |
Blocked by: | Blocking: |
Description
I noticed that if I make a table row selectable I can't bind a click or double click event (maybe others) to them. The event I try to bind simply won't fire.
This bug occurs in Firefox 3.0.6 running under Windows Vista SP1. This bug doesn't occur in Internet Explorer 7 running under the same system.
$('tbody').selectable({filter:'tr'}); $('tbody tr').click(function(){alert("click event");});
This is my first bug report, let me know if I've done anything wrong.
Jeff
Change History (9)
comment:1 Changed 14 years ago by
Milestone: | 1.7 → 1.8 |
---|
comment:2 Changed 14 years ago by
comment:3 Changed 14 years ago by
Added debugging statements to figure out where the click was being blocked and found the problem to be with the helper lasso
[ui.selectable.js - line2 80+?]
//return //Click event works this.helper.css({ "z-index": 100, "position": "absolute", "left": event.clientX, "top": event.clientY, "width": 0, "height": 0 }); return //Click event fails
If I were to change the z-Index of the helper to -100, code works fine. So the issue seems to be the browser is firing the click event on the layer we created and not the actual click location.
comment:4 Changed 14 years ago by
Seems like if I adjust the lasso to be offset by 2 pixels, the onclick for the row fires.
"left": event.clientX-2, "top": event.clientY-2,
Looks a little ugly, but works.
comment:5 Changed 13 years ago by
I've got the same problem on Firefox 3.5, Firefox 3.0.13 and it is quite blocking.
Is it linked with _mouseInit which binds mouse click and call a stopImmediatePropagation() ?
comment:7 Changed 13 years ago by
This issue also happens on IE 8, FF 3.6.3, Chrome 5.0.375.70. (Windows XP SP3)
Using
this.helper.css({ "z-index": self.element.zIndex() - 1, "position": "absolute", "left": event.clientX, "top": event.clientY, "width": 0, "height": 0 });
and
this.helper.css({ zIndex: 100, left: x1, top: y1, width: x2-x1, height: y2-y1});
instead of
this.helper.css({ "z-index": 100, "position": "absolute", "left": event.clientX, "top": event.clientY, "width": 0, "height": 0 });
and
this.helper.css({ zIndex: 100, left: x1, top: y1, width: x2-x1, height: y2-y1});
solves the issue on all 3 aforementionned browsers and does not seem to generate any other problem beside repeatidly setting the zIndex when the mouse is dragging (whereas once would be enough...).
comment:8 Changed 12 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
This is as designed. The default value for the distance option is 0 which shouldn't allow any click to occur after a mousedown as the mousedown captures and starts the selection right away. See http://jsbin.com/idixi6
If you set the distance option to a value greater than 0 then the click works and the selection doesn't start until at least a 1px (or {{distance}}px) mousemove follows the mousedown. See http://jsbin.com/idixi6/3
comment:9 Changed 12 years ago by
See related discussion http://forum.jquery.com/topic/selectable-dosn-t-fire-click-event
I'm also experiencing the same thing with doubleclick in Firefox 3.0.7 on Windows XP SP3.