我有一个模态框,淡入淡出mouseenter
并淡出mouseleave
.唯一的问题是当使用平板电脑等触摸屏设备时,fadeout
一旦它在页面上显示,我就无法获得模态.是否有任何方法可以将此代码修改为用户触摸模态框外的任何时间fadeout
?
$(".tiptrigger").mouseenter(function() { var s_id = $(this).attr('id'); // There may be more than one per page $("#tiptip_holder-"+s_id).fadeIn("fast"); }); $(".tiptrigger").mouseleave(function() { var s_id = $(this).attr('id'); $("#tiptip_holder-"+s_id).fadeOut("slow"); });
Irvin Domini.. 17
您可以尝试使用触摸事件(未测试):
$('.tiptrigger').on('mouseenter touchstart', function(){ var s_id = $(this).attr('id'); // There may be more than one per page $("#tiptip_holder-"+s_id).fadeIn("fast"); }); $('.tiptrigger').on('mouseleave touchend', function(){ var s_id = $(this).attr('id'); $("#tiptip_holder-"+s_id).fadeOut("slow"); });
你可以试试:
$('.tiptrigger').on('mouseenter touchstart', function(e){ var s_id = $(this).attr('id'); // There may be more than one per page $("#tiptip_holder-"+s_id).fadeIn("fast"); e.stopPropagation() }); $('.tiptrigger').on('mouseleave', function(e){ var s_id = $(this).attr('id'); $("#tiptip_holder-"+s_id).fadeOut("slow"); }); $('body').on('touchstart', function(e){ $("div[id^='tiptip_holder']").fadeOut("slow"); });
Milind Anant.. 8
mouseMouse事件(mouseover
,mouseout
,mousedown
,mouseup
,mousemove
,等等)是特定于鼠标输入设备.键盘有keydown
,keypress
和keyup
.触摸有touchstart
,touchmove
,touchend
和touchcancel
.iPhone/iPad /等上的Webkit具有Apple特有的附加手势开始/移动/结束事件.
因此,您应该检查运行该应用程序的设备,然后相应地处理代码.
mouseMouse事件(mouseover
,mouseout
,mousedown
,mouseup
,mousemove
,等等)是特定于鼠标输入设备.键盘有keydown
,keypress
和keyup
.触摸有touchstart
,touchmove
,touchend
和touchcancel
.iPhone/iPad /等上的Webkit具有Apple特有的附加手势开始/移动/结束事件.
因此,您应该检查运行该应用程序的设备,然后相应地处理代码.
您可以尝试使用触摸事件(未测试):
$('.tiptrigger').on('mouseenter touchstart', function(){ var s_id = $(this).attr('id'); // There may be more than one per page $("#tiptip_holder-"+s_id).fadeIn("fast"); }); $('.tiptrigger').on('mouseleave touchend', function(){ var s_id = $(this).attr('id'); $("#tiptip_holder-"+s_id).fadeOut("slow"); });
你可以试试:
$('.tiptrigger').on('mouseenter touchstart', function(e){ var s_id = $(this).attr('id'); // There may be more than one per page $("#tiptip_holder-"+s_id).fadeIn("fast"); e.stopPropagation() }); $('.tiptrigger').on('mouseleave', function(e){ var s_id = $(this).attr('id'); $("#tiptip_holder-"+s_id).fadeOut("slow"); }); $('body').on('touchstart', function(e){ $("div[id^='tiptip_holder']").fadeOut("slow"); });