gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 21:52:24 39 4
gpt4 key购买 nike

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

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

这是我当前的示例: http://jsfiddle.net/omhuorpr/

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() 阻止其他事件触发。

最佳答案

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

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

#someElement {
font-size:80px;
}

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

关于javascript - scrollIntoView() 阻止其他监听器触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28433178/

39 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com