Question

我有一个奇怪的设置，其中表格单元格是contenteditable = true，并在其上放置div以添加一些边框效果而不更改表格中任何单元格的尺寸。我遇到的问题是单元格顶部的div阻塞了mousedown调用 - 我已经有一个通过jQuery绑定到div的处理程序（单元格也是如此，因为div只悬停在所选单元格上）。

是否可以在从div的jQuery处理程序传递事件信息（鼠标位置，event.data等）时触发表格单元格上的mousedown事件（位于中心的单元格，大小为2px）每个方向 - 使用css“outline”属性不是一个选项，因为有些单元格具有不同大小的边框，可以将其抛弃）？

我不是试图在这种情况下为可信任的单元格调用自定义的mousedown处理程序，而是将鼠标事件传播到可信任的单元格（用于执行选择开始/结束更改）。

编辑：我通过以下方式尝试了这一点，它仍然无法触发任何原生的contenteditable事件（移动选择光标，在chrome中设置焦点[虽然在Firefox中它确实设置焦点如果你已经点击了contenteditable div之前]）：

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

这是一个表明问题的小提琴：

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

Answer 1

创意1

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

如果你想将事件从div传递到单元格，你可以试试jQuery的触发方法。

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

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

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

创意2

由于您需要在编辑期间阻止编辑区域，请尝试添加：

pointer-events: none;

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

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

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

如何触发令人满意的mousedown事件？

1 个答案: