我在一个事件目标上使用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()
阻止其他事件触发的原因。
1条答案
按热度按时间gjmwrych1#
这是因为
focus
事件在鼠标按下时触发,而click
事件在鼠标抬起时触发。如果元素已经滚动,以至于在您释放按钮时鼠标指针不再位于元素上方,则click
事件不会触发。但是,如果滚动后鼠标指针仍然位于元素上方,则click
* 将 * 触发。如果你增加字体大小并点击靠近顶部的位置,你会看到
click
事件被触发;如果你点击靠近底部的位置,元素从指针下滚动出来,click
事件不会被触发。http://jsfiddle.net/omhuorpr/1/