在用jquery ui selectable时候,在一个Table的tr上绑定了selectable的事件,其中一个td中有<a/>链接,绑定了click事件。
测试时发现<a/>链接的click事件没反应,并且是在滚动条在页面最顶端的时候,滚动条没反应,在滚动条下移之后,click事件触发了!
google找到一个类似问题的解答:http://forum.jquery.com/topic/selectable-dosn-t-fire-click-event
在selectable初始化的时候加一个属性:distance,并且值设成大于0。尝试之后,果然click事件能正常触发了。
但是这又导致另一个问题,本来在<tr/>上click事件能直接选中该行,但是distance设成大于0之后,tr的click事件开始无效了。
根据jquery ui的开发者解释,selectable的时候思想是:select的动作不应该和click动作同时发生。就是说如果distance属性为0(默认就是0)的时候,click事件即被认为响应select事件,自定义的click事件会被屏蔽掉。所以这似乎是一个无解的事情!
但是jquery ui屏蔽click事件的做法好像是在点击的时候生成了一个helper div来显示lasso(这个词不知道是不就是selectable在鼠标拖动时显示的虚线框),就是这个lasso阻止了click事件的发生。有一个人给出了一个解决办法:
var content = $('#content').selectable();
var _mouseStart = content.data('selectable')['_mouseStart'];
content.data('selectable')['_mouseStart'] = function(e) {
_mouseStart.call(this, e);
this.helper.css({
"top": -1,
"left": -1
});
};
试了一下,上面的代码确实有效!