HmmerJS - 使 mousedown 在浏览器和触摸设备上保持一致
HmmerJS - make mousedown consistent on browser and touch devices
我正在使用 HammerJS 来处理手势。我有一个 div
元素(锤子正在其上管理事件),其中包含一个 select
。在触摸设备中,或在 chrome 开发工具的 device mode
上,我可以通过轻敲打开 select,也可以通过触摸和平移移动整个 div
,即使拿着 select
元素,我也可以拖动整个东西。 (这是我的预期行为)。
另一方面,当使用鼠标时。只要我点击 select
,它就会打开。所以,我无法拖动元素。
在这两种设备中,事件似乎都是通过冒泡到达 Hammer,因为它在包含 div
上等待它们。但区别似乎是 点击(点击?)和拖动 在触摸设备上不会触发 mousedown 事件,只有点击才会触发。
是否可以让浏览器像触摸设备一样运行,允许我通过按住 select
来拖动我的 div
并且仍然能够拥有它点击展开?
是否有任何有助于区分两者的事件信息?
我是在斜着看吗?我是 HammerJS 的新手。
我尝试了什么?
侦听 select
上的 mousedown 事件,防止默认行为,让事件冒泡并尝试强制打开 select
点击事件(事件管理器)。但似乎根本做不到,至少,建议的方法 here 没有用。
我能够通过有条件地阻止 mousedown
事件的默认行为并让它冒泡到 hammerJS Tap 处理程序来实现所需的一致性。
var someCondition = false;
function preventDefaultWithCondition (ev) {
if (someCondition) {
someCondition = false;
ev.stopPropagation();
return;
}
// Otherwise prevent the default behavior
ev.preventDefault();
this.blur();
window.focus();
}
然后在 Tap 事件处理程序上:
function onTap (ev) {
if (ev.target.tagName === 'SELECT') {
someCondition = true;
/* Trigger the mousedown event programmatically on the select. */
}
}
描述了我用来触发 mousedown
事件的技术 here
总体思路是,无论设备如何,最终决定是否打开 select 最终委托给 HammerJS。
我正在使用 HammerJS 来处理手势。我有一个 div
元素(锤子正在其上管理事件),其中包含一个 select
。在触摸设备中,或在 chrome 开发工具的 device mode
上,我可以通过轻敲打开 select,也可以通过触摸和平移移动整个 div
,即使拿着 select
元素,我也可以拖动整个东西。 (这是我的预期行为)。
另一方面,当使用鼠标时。只要我点击 select
,它就会打开。所以,我无法拖动元素。
在这两种设备中,事件似乎都是通过冒泡到达 Hammer,因为它在包含 div
上等待它们。但区别似乎是 点击(点击?)和拖动 在触摸设备上不会触发 mousedown 事件,只有点击才会触发。
是否可以让浏览器像触摸设备一样运行,允许我通过按住 select
来拖动我的 div
并且仍然能够拥有它点击展开?
是否有任何有助于区分两者的事件信息?
我是在斜着看吗?我是 HammerJS 的新手。
我尝试了什么?
侦听 select
上的 mousedown 事件,防止默认行为,让事件冒泡并尝试强制打开 select
点击事件(事件管理器)。但似乎根本做不到,至少,建议的方法 here 没有用。
我能够通过有条件地阻止 mousedown
事件的默认行为并让它冒泡到 hammerJS Tap 处理程序来实现所需的一致性。
var someCondition = false;
function preventDefaultWithCondition (ev) {
if (someCondition) {
someCondition = false;
ev.stopPropagation();
return;
}
// Otherwise prevent the default behavior
ev.preventDefault();
this.blur();
window.focus();
}
然后在 Tap 事件处理程序上:
function onTap (ev) {
if (ev.target.tagName === 'SELECT') {
someCondition = true;
/* Trigger the mousedown event programmatically on the select. */
}
}
描述了我用来触发 mousedown
事件的技术 here
总体思路是,无论设备如何,最终决定是否打开 select 最终委托给 HammerJS。