是否可以通過dispatchEvent（）將鼠標單擊到<input type = text>元素？

基本上我試圖派遣一個定製的鼠標點擊事件，使用下面的代碼的文本輸入元素（見本jsFiddle）：是否可以通過dispatchEvent（）將鼠標單擊到<input type = text>元素？

function simulateClick(id) { 
    var clickEvent = document.createEvent("MouseEvents"); 
    clickEvent.initMouseEvent("click", true, true, window, 1, 0, 0, 0, 0, 
     false, false, false, false, 0, null); 

    var element = document.getElementById(id); 
    element.dispatchEvent(clickEvent); 
}

當我一個type="checkbox"元素上運行代碼，它工作完全正常但在調用type="text"元素時根本不起作用。

現在，這裏的一對MDN的initMouseEvent()定義：

event.initMouseEvent(type, canBubble, cancelable, view, 
       detail, screenX, screenY, clientX, clientY, 
       ctrlKey, altKey, shiftKey, metaKey, 
       button, relatedTarget);

所以在上面的例子中screenX, screenY, clientX和clientY都將是0（當然，上面的代碼工作完全正常使用複選框不管他們的位置）。我嘗試捕捉一個真實的事件，並將屏幕和客戶端座標傳遞給定製事件，但無濟於事。

雖然可能由於安全原因，文本輸入元素會忽略自定義鼠標事件，但element.focus()也不應該起作用。

任何想法或見解將不勝感激！

來源

2011-03-18 Philip Kamenarsky

如果我是你，我會考慮使用jQuery圖書館，然後觸發'方法 - 它很好的跨瀏覽器，並會讓你的生活變得更容易:) – 2011-03-18 13:47:08

你如何確定，點擊不工作？當我爲你的例子添加一個'onclick'處理程序時，它會被觸發：http://jsfiddle.net/epevj/11/你是否期望獲得焦點？那你爲什麼不用'focus（）'？ – RoToRa 2011-03-18 13:51:57

據我可以告訴你的代碼工作正常。然而，它並沒有像你想象的那樣集中輸入字段，而是在輸入字段上觸發事件，就像在這個小提琴中看到的那樣：http://jsfiddle.net/ENvZY/

注意：雖然代碼不是交叉瀏覽器兼容，但它在ie8中失敗。

考慮使用一個很好的跨瀏覽器庫如jQuery，而不是去原生DOM方法 - 車輪存在和完美的作品，重塑這是在浪費時間:)

來源

2011-03-18 13:51:13

確實調用了鼠標單擊處理程序，雖然輸入字段沒有自動獲取焦點，因爲我錯誤地假設了，並且您指出了:)我知道jQuery，這只是概念代碼的證明。謝謝！ – 2011-03-18 14:31:34

是否可以通過dispatchEvent（）將鼠標單擊到<input type = text>元素？

回答

相關問題