JQuery实现长按元素修改css样式(长按事件)

 需求：

     有时在做移动端页面开发过程中遇到这种需求：长按元素修改元素样式。

   在jQuery和Zepto中都没有包含长按事件，所以需要我们自己来扩展一下。

/* 扩展的JQ的longPress事件 */
 $.fn.longPress = function(fn) {
    var timeout = undefined;
    var $this = this;
    for(var i = 0;i<$this.length;i++) {
        $this[i].addEventListener('touchstart', function(event) {
            timeout = setTimeout(fn, 800);  //长按时间超过800ms，则执行传入的方法
            }, false);
        $this[i].addEventListener('touchend', function(event) {
            clearTimeout(timeout);  //长按时间少于800ms，不会执行传入的方法
            }, false);
    }
}


/* 长按每一个li元素实现元素的样式修改 */
$('.item').each(function(index,element){
    var that = $(element); 
    $(element).longPress(function() {
        that.css("padding-left","38px");
    })
})

操作：将上述文件放在自己的js文件中，前提引入Jqery.js文件

重点精华：在于each方法 和 var that = $(element);的使用。

体会：网上很少例子，折腾了很久....希望对大家有帮助，有用请点赞。