javascript - 即使使用了 preventDefault，也检测 onmouseup/onmousemove

Question

我问了这个问题:PDF.JS overlay can not be made draggable .

我注意到 PDF.js 似乎阻止了 document.onmousemove 和 document.onmouseup 事件的触发。

我认为解决方案是使用元素的 onmousemove 和 onmouseup，但这会带来问题。

例如，如果您将鼠标移动得太快，元素的 onmousemove 和 onmouseup 事件将停止触发。如果您尝试将其拖出边界，也会发生同样的事情，该元素的事件将停止触发。您可以在下面的代码片段中自己尝试。

// Modified from https://www.w3schools.com/howto/howto_js_draggable.asp

function dragElement(elmnt, _bounds) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onmousedown = dragMouseDown;
    let bounds = [..._bounds];
    bounds[2] -= +elmnt.style.width.slice(0, -2);
    bounds[3] -= +elmnt.style.height.slice(0, -2);
    
    function dragMouseDown(e)
    {
        e = e || window.event;
        e.preventDefault();
        pos3 = e.clientX;
        pos4 = e.clientY;
        elmnt.onmouseup = closeDragElement; // Originally document.onmouseup
        elmnt.onmousemove = elementDrag; // Originally document.onmousemove
    }
    
    function elementDrag(e)
    {
        e = e || window.event;
        e.preventDefault();
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        let yC = elmnt.offsetTop - pos2, xC = elmnt.offsetLeft - pos1;
        
        if (xC < bounds[0]) xC = bounds[0];
        else if (xC > bounds[2]) xC = bounds[2];
        
        if (yC < bounds[1]) yC = bounds[1];
        else if (yC > bounds[3]) yC = bounds[3];
        
        elmnt.style.top = yC + "px";
        elmnt.style.left = xC + "px";
    }
    
    function closeDragElement()
    {
        elmnt.onmouseup = null; // Originally document.onmouseup
        elmnt.onmousemove = null; // Originally document.onmousemove
    }
}

dragElement(toDrag, [0, 0, 200, 200]);

<div style="
    position: absolute;
    left:     0;
    top:      0;
    width:    200px;
    height:   200px;
    border:   1px solid black
" onmousedown="event.preventDefault()" onmouseup="event.preventDefault()">
    <h1 style="text-align:center">My PDF</h1>
    <div style="
        position: absolute;
        left:     150px;
        top:      150px;
        width:    25px;
        height:   25px;
        border:   1px solid black;
    ">
    </div>
    <div id=toDrag style="
        cursor:   move;
        position: absolute;
        left:     10px;
        top:      25px;
        width:    25px;
        height:   25px;
        border:   1px solid black;
        background-color: #cac;
        border-radius:    25px
    ">
    </div>
</div>

我的问题是无论如何检测 mousemove 和 mouseup 即使 event.preventDefault() 已被触发。

我最好的猜测是这样的:

document.querySelectorAll('*').forEach(e => e.addEventListener('mousemove', elementDrag);
document.querySelectorAll('*').forEach(e => e.addEventListener('mouseup', closeDragElement);

但是，我担心这会影响性能，尤其是在 mousemove 上。

Answer 1

DOM 事件传播分为三个阶段:捕获阶段、目标阶段和冒泡阶段。粗略地说，事件首先向下移动到目标，到达目标，然后向上移动。

EventTarget.addEventListener() 有一个可选参数 useCapture(参见 docs):

useCapture Optional

A boolean value indicating whether events of this type will bedispatched to the registered listener before being dispatched to anyEventTarget beneath it in the DOM tree. Events that are bubblingupward through the tree will not trigger a listener designated to usecapture. Event bubbling and capturing are two ways of propagatingevents that occur in an element that is nested within another element,when both elements have registered a handle for that event. The eventpropagation mode determines the order in which elements receive theevent. See DOM Level 3 Events and JavaScript Event order for adetailed explanation. If not specified, useCapture defaults to false.

话虽如此，您可以尝试类似的方法来监听捕获阶段的事件，而不是冒泡阶段:

document.addEventListener('mousemove', elementDrag, true);
document.addEventListener('mouseup', closeDragElement, true);