4
我嘗試了以下代碼來攔截mousedown事件,然後重新分派它以便在任何元素獲得焦點時進行控制。將mousedown事件分派給元素將不會使其焦點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.addEventListener('mousedown', function (e) {
console.log('mousedown', e);
if (e.target.getAttribute('id') === 'target' && !e.__redispatched) {
console.log('cancelling');
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
setTimeout(function() {
var re = new MouseEvent('mousedown', {
bubbles: true,
cancelable: true,
view: window,
screenX: e.screenX,
screenY: e.screenY,
clientX: e.clientX,
clientY: e.clientY,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
altKey: e.altKey,
button: e.button,
buttons: e.buttons,
relatedTarget: e.relatedTarget,
region: e.region
});
re.__redispatched = true;
document.getElementById('target').dispatchEvent(re);
}, 100);
}
})
</script>
<input id="target" type="text"/>
</body>
</html>
控制檯顯示該事件是否正確重新分派,因爲它是由target
元件拍攝,但重點不是獲得了該元素。
當我嘗試不干涉事件時,在mousedown
事件處理之前獲得焦點。
是否可以通過重新調度mousedown
事件來處理此行爲,還是必須手動處理focus
? 或者我做錯了事件?
謝謝。