2016-1-17 博客文章增加了markdown格式,由MD标记

2016-03-27 23:20:11

erp里表格在PC版里,鼠标总是点击行就跳进详情。尤其是当我们要复制该行的数据时,它也自动跳到详情页,很让人讨厌的。


其中一个解决办法,就是把单击跳到详情页的事件改为双击,这样鼠标拖拉复制时,就无法触发双击事件了。

$("table tr").dblclick(function(){});

只可惜dblclick事件在移动端并不起作用。


google了,就查到模拟双击事件的代码,思想就是:两次单击的时间间隔不超过0.8秒。

var touchtime = 0;

$("table tr").click(function(){
        var nowItem = $(this);
        var path = nowItem.find("a").prop("href");  //获取链接的路径

        if( 0 == touchtime ){
            //第一次点击
            touchtime = new Date().getTime();
        }else{
            if( new Date().getTime() - touchtime < 800 ){
                //这里放你要实现的功能代码
                window.open(path, '_blank'); //新开窗口,访问链接
            }else{
                //如果第二次点击在第一次点击0.8秒后,
                //则第二次点击默认为下一次双击判断的第一次点击
                touchtime = new Date().getTime();
            }
        }
 });

这样移动端双击事件就实现了。


但上面这种解决方法也有一点小问题。假如我要实现双击表格的某一列执行跳出弹出框的操作时,我会这样写:

$("table td").dblclick(function(){ alert("dblclick event on td");});

结果发现双击时,上面绑定到tr的事件也会执行,如是想到禁用当前td事件的冒泡效果,代码如下:

$("table td").dblclick(function(e){
        e.stopPropagation();
        alert("dblclick event on td");
});

可是仍然无法屏蔽tr的双击事件。当tr双击事件如下实现时,上面的屏蔽冒泡效果才有效。

$("table tr").dblclick(function(e){
        alert("tr event");
  });

禁止冒泡:就是触发子元素时,防止绑定父元素的事件一同触发。


鼠标双击效果还是不错,移动端双击,体验还是差点。所以为了解决我最初的问题,还是老老实实的判断访问网页的设备类型吧。当为移动端时,就给tr绑定单击事件,当为PC时,那就算了。

var device_style = "PC";
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        device_style = "MOBILE";
}
if("MOBILE" == device_style){
    $('table tr').on('click', function(){
         //这里放你要实现的代码
    });
}

测试用例,请访问这里  js双击事件模拟效果