Question

我正在为移动/触摸设备以及桌面非触摸设备构建网站。为了帮助消除触摸设备的jQuery .click事件的300ms延迟，我正在使用tappy库，它可以很好地工作。

https://github.com/filamentgroup/tappy

话虽这么说，我只想在必要时绑定这个'tap'事件，并且如果设备是非触摸的，想要绑定常规的.click事件。我知道tappy的'tap'事件会触发非触摸设备，但我宁愿只在必要时使用它，因为记录了一些怪癖。

到目前为止，每次我想要执行此操作时都会编写开关函数，如下所示：

if ($('html').hasClass('no-touch')) {
    $('.sidebar').find('.strip').find('.explore-wrapper').click(function() {
      $(this).closest('.sidebar').addClass('active');
    });
} else {    
    $('.sidebar').find('.strip').find('.explore-wrapper').bind('tap', function() {
      $(this).closest('.sidebar').addClass('active');    
    });
 }

我想扩展jQuery并编写我自己的.click版本，也许称为'tapClick'，以便我的代码可以像：

$('.sidebar').find('.strip').find('.explore-wrapper').tapClick(function() {
    $(this).closest('.sidebar').addClass('active');
});

我开始尝试编写自己的扩展程序，但无法得到它...任何帮助都会受到赞赏：

// Custom tap/click bind
$.extend({
    tapClick : function(callbackFnk) {
        if ($('html').hasClass('touch')) {
            $(this).bind('tap', function() {
                if(typeof callbackFnk == 'function') {
                    callbackFnk.call(this);
                }
            });
        } else {
            $(this).click(function() {
                if(typeof callbackFnk == 'function') {
                    callbackFnk.call(this);
                }
            });
        }
    }
});

Answer 1

尝试用jQuery.fn.extend()代替jQuery.extend()

如，

    $.extend({tapClick:function() {console.log(this)}}); 
    $.fn.extend({tapClick:function() {console.log(this)}}); 

    $.tapClick(); // function (a,b){return new e.fn.init(a,b,h)}
    $("html").tapClick(); // [html, ...]

＆＃13;

       $.extend({tapClick:function() {console.log(this)}}); 
    $.fn.extend({tapClick:function() {console.log(this)}}); 
    
    $.tapClick();
    $("html").tapClick();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

这是我最终使用的代码解决了这个问题。

$.fn.extend({
    tapClick:function(callback) {
        if ($('html').hasClass('touch')) {
            return $(this).click(callback);
        } else {
            return $(this).bind('tap', callback);
        }
    }
});

使用修改后的.click函数扩展jQuery

2 个答案: