如何觸發contenteditable mousedown事件？

我有一個有點奇怪的設置，其中一個表單元格被製作contenteditable = true與一個div放置它來添加一些邊界效果而不改變表中的任何單元格的大小。我遇到的問題是，單元格頂部的div阻止了mousedown調用 - 我已經有一個通過jQuery綁定到div的處理程序（單元格也是這樣，因爲div只懸停在選定的單元格上）。如何觸發contenteditable mousedown事件？

是否有可能觸發表格單元格上的mousedown事件，同時從div的jQuery處理程序傳遞事件信息（鼠標位置，event.data等）（定位在中心位置，單元格大小爲2px）在每個方向 - 使用css「outline」屬性在這裏不是一個選項，因爲一些單元格具有不同大小的邊框，可以將它扔掉）？

我不是試圖在這種情況下爲contenteditable單元調用自定義mousedown處理程序，而是讓鼠標事件傳播到contenteditable單元（用於執行選擇開始/結束更改等操作）。

編輯：我通過以下嘗試，它仍然無法觸發任何本機contenteditable事件（移動選擇光標，設置焦點內鉻[雖然在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/

來源

2013-03-29 CoryG

想法一

如果您放置在單元格上的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

既然你需要有在編輯過程中div阻止編輯區域，請嘗試添加：

pointer-events: none;

到你的div的CSS。鼠標事件將被div完全忽略。

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

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

來源

2013-03-29 08:46:01 louisbros

觸發似乎與.bind或類似活動結合工作，但不會觸發，將一個CONTENTEDITABLE領域內將光標移動到本地鼠標按下功能。 – CoryG

我明白你的意思了。我編輯了一些將光標移動到輸入的東西。 – louisbros

知足單元已經有焦點（div懸停在它上面不能有焦點，即使點擊） - 問題在於移動光標。例如，當文本框中有文本並單擊其中的不同部分時，光標會移動，當您拖動並拖動它時會選擇其中的一部分 - 這些是我嘗試通過將鼠標位置數據轉發到潛在的可控細胞。 – CoryG

如何觸發contenteditable mousedown事件？

回答

相關問題