根据 jQuery Mobile API 文档的描述,tap
事件背后是 vclick
事件:
Warning: Use tap with cautionTap makes use of vclick and therefore should be used with caution on touch devices. See the
vclick API documentation for more details.
vclick
文档似乎没有写明实现方式。找源码粗略地看了一下,在移动端应该是使用的 touchend
事件。
// jquery.mobile-1.4.5.js
// ...
// Line 3587 - 3621:
function handleTouchEnd( event ) {
if ( blockTouchTriggers ) {
return;
}
disableTouchBindings();
var flags = getVirtualBindingFlags( event.target ),
ve, t;
triggerVirtualEvent( "vmouseup", event, flags );
if ( !didScroll ) {
ve = triggerVirtualEvent( "vclick", event, flags );
if ( ve && ve.isDefaultPrevented() ) {
// The target of the mouse events that follow the touchend
// event don't necessarily match the target used during the
// touch. This means we need to rely on coordinates for blocking
// any click that is generated.
t = getNativeEvent( event ).changedTouches[ 0 ];
clickBlockList.push({
touchID: lastTouchID,
x: t.clientX,
y: t.clientY
});
// Prevent any mouse events that follow from triggering
// virtual event notifications.
blockMouseTriggers = true;
}
}
triggerVirtualEvent( "vmouseout", event, flags);
didScroll = false;
startResetTimer();
}
// ...
// Line 3679 - 3680:
$document.bind( "touchstart", handleTouchStart )
.bind( "touchend", handleTouchEnd )
// ...
而在 HTML 5.x 标准里,input
元素的 disabled
属性的值被进一步表述为 form control
的状态,可以参阅 The input element - HTML 5.1 2nd Edition: 4.10. Forms | w3.org。同时,一个 disabled
了的 form control
被设定为不接收任何用户指定的 click
事件:
在 MDN 对 input
元素 disabled
属性的描述中也可以找到相关说明:(个人认为中文版翻译得有问题,就不放了。)
Specifically, disabled inputs do not receive the
click
event, and disabled inputs are not submitted with the form.
所以 touchend
事件不会被屏蔽,tap
事件自然也会正常触发,click
事件则被阻止。
- tap | iQuery Mobile API Documentation
- vclick | iQuery Mobile API Documentation
- jquery.mobile-1.4.5.js
- HTML 5.1 2nd Edition: 4.10. Forms | w3.org
- <input>: The Input (Form Input) element | MDN
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…