Opened 11 years ago

Closed 9 years ago

Last modified 9 years ago

#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 11 years ago by rdworth

Milestone: 1.71.8

comment:2 Changed 11 years ago by ajacksified

I'm also experiencing the same thing with doubleclick in Firefox 3.0.7 on Windows XP SP3.

comment:3 Changed 11 years ago by epascarello

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 11 years ago by epascarello

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 10 years ago by Ludovic

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:6 Changed 10 years ago by Scott González

Also see #4067.

comment:7 Changed 9 years ago by benjamin.neau

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 9 years ago by rdworth

Resolution: invalid
Status: newclosed

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

Note: See TracTickets for help on using tickets.