2

I have a somewhat odd setup wherein a table cell is made contenteditable=true with a div placed over it to add some border effects without changing the dimensions of any of the cells in the table. The issue I'm running into is that the div over top of the cell is blocking the mousedown call - I already have a handler bound to the div through jQuery (the cell as well, because the div only hovers over the selected cell).

Is it possible to trigger the mousedown event on the table cell while passing the event information (mouse position, event.data, etc) from the jQuery handler of the div (positioned over the center the cell with a 2px larger size in each direction - using the css "outline" property isn't an option here because some of the cells have different sized borders that throw it off)?

I'm not attempting to call a custom mousedown handler in this case for the contenteditable cell, but to get the mouse event to propagate to the contenteditable cell (for doing things like selection start/end changes).

Edit: I tried this via the follow and it still doesn't work to trigger any of the native contenteditable events (moving the selection cursor, setting focus within chrome [though in firefox it does set focus if you have already clicked the contenteditable div once before]):

var x = 10;
var y = 10;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window, 1, element.offsetLeft + x, element.offsetY + y, x, y, false, false, false, false, 0, null);
element.dispatchEvent(event);

Here is a fiddle demonstrating the issue:

http://jsfiddle.net/CoryG/SgBy4/

4

1 回答 1

0

理念一

如果您放置在单元格上的 div 不是 DOM 中单元格的子级，则该事件不会传播到该单元格。

如果您想将事件从 div 传递到单元格，您可以尝试 jQuery 的 trigger 方法。

要在触发事件后关注输入字段，您可以添加以下内容：

// queued and invoked after currently pending event handlers are finished
setTimeout(function(){$('#inputID').focus();}, 0);

演示：http: //jsfiddle.net/louisbros/9JNPr/

想法 2

由于您需要在编辑过程中让 div 阻塞编辑区域，请尝试添加：

pointer-events: none;

到你的 div 的 css。鼠标事件将被 div 完全忽略。

演示：http: //jsfiddle.net/louisbros/9JNPr/4/

Caniuse：http ://caniuse.com/pointer-events

于 2013-03-29T08:46:01.483 回答