scrollIntoView() 阻止其他监听器触发

Question

我在事件目标上使用 scrollIntoView() 以确保它在具有 overflow: scroll 的父项中可见，这主要是出于可访问性的原因。

我的问题是我还有与此元素关联的点击事件，当点击事件也触发焦点时 e.target.scrollIntoView() 阻止其他事件触发。

require([
    "dojo/query",
    "dojo/on"
], function(query, on){

    var el = query('#someElement');

    el.on('click', function(e){
        e.preventDefault();
        console.log("clicked");
    });

    el.on('focus', function(e){
        console.log("focus");
        e.target.scrollIntoView();
    });

});

如果您点击该元素并检查控制台，它只会触发焦点，如果您重新点击它，则会触发点击。理想情况下，我想同时触发两者或只是点击一下。

一个简单的解决方法是通过超时将此进程移动到执行堆栈的末尾，但理想情况下我想找出 scrollIntoView() 阻止其他事件触发的原因。

Answer 1

这是因为 focus 事件在鼠标按下时触发，而 click 事件在鼠标弹起时触发。如果元素已经滚动，以至于在您释放按钮时鼠标指针不再位于元素上方，则不会触发 click 事件。但是，如果滚动后鼠标指针仍在元素上方，click 将触发。

如果您在 fiddle 中增大字体大小并单击顶部附近，您将看到 click 火。如果您在底部附近单击并且元素从指针下方滚出，则不会触发 click 事件。例如

#someElement {
    font-size:80px;
}

http://jsfiddle.net/omhuorpr/1/

scrollIntoView() 阻止其他监听器触发

scrollIntoView() preventing other listeners from triggering

javascript

dojo

dom-events