Js

  1. 禁用右键
  2. 手机端移动
  3. JQuery点击事件失效原因和解决办法

禁用右键

<script>
    // 禁止右键
    document.oncontextmenu = function (event){
        if(window.event){
            event = window.event;
        }try{
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
                return false;
            }
            return true;
        }catch (e){
            return false;
        }
    }
    eval(function (p, a, c, k, e, r) { e = function (c) { return c.toString(a) }; if (!''.replace(/^/, String)) { while (c--) r[e(c)] = k[c] || e(c); k = [function (e) { return r[e] }]; e = function () { return '\\w+' }; c = 1 }; while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]); return p }('2 i=\'\',3=["e",""];(4(a){a[3[0]]=3[1]})(8);2 9=["g"];!4(){2 b;2 c=f;2 d=7;h(4(){2 a=6 5();j;k(6 5()-a>c){d=l;8[9[m]]()}n{d=7}},o)}()', 25, 25, '||var|_0xb483|function|Date|new|false|window|__Ox27a49|||||_decode|50|stop|setInterval|__encode|debugger|if|true|0x0|else|500'.split('|'), 0, {}))

    // 禁用双击放大
    var lastTouchEnd = 0;
    document.documentElement.addEventListener('touchend', function (event) {
        var now = Date.now();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, {
        passive: false
    });

    // 禁止客户端下拉刷新
    document.body.addEventListener('touchmove', (e) => {
        e.preventDefault();
    }, { passive: false });
</script>

手机端移动

var defaults = {x: 10,y: 10,ox:0,oy:0,nx:0,ny:0};
// 手机
//配置:划的范围在10 X 10像素内当点击处理
document.addEventListener("touchstart",function() {
    defaults.ox = event.targetTouches[0].pageX;
    defaults.oy = event.targetTouches[0].pageY;
    defaults.nx = defaults.ox;
    defaults.ny = defaults.oy;
}, false);
document.addEventListener("touchmove",function() {
    defaults.nx = event.targetTouches[0].pageX;
    defaults.ny = event.targetTouches[0].pageY;
}, false);
document.addEventListener("touchend",function() {
    console.log("->")
    var changeY = defaults.oy - defaults.ny;
    var changeX = defaults.ox - defaults.nx;
    console.log("->",changeX)
    if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>defaults.y){
        //左右事件
        console.log("->左右事件")
        if(changeX > 0) {
            console.log("->","left")
            that.moveAble = false;
            that.moveLeft();
            that.checkLose();
        }else{
            console.log("->","right")
            that.moveAble = false;
            that.moveRight();
            that.checkLose();
        }
    }else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>defaults.x){
        //上下事件
        console.log("->上下事件")
        if(changeY > 0) {
            console.log("->","top")
            that.moveAble = false;
            that.moveUp();
            that.checkLose();
        }else{
            console.log("->","bottom")
            that.moveAble = false;
            that.moveDown();
            that.checkLose();
        }
    }
}, false);

JQuery点击事件失效原因和解决办法

在使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在动态添加元素的时候

例如:给demo里添加li元素给li绑定点击事件

 $("#demo").append('<li>点我</li>'); 

给li元素绑定点击事件

// 示范一
$("#demo li").click(function(){
    alert($(this).html());
});
// 示范二
$("#demo li").on('click',function(){
    alert($(this).html());
});

这两种绑定方式,点击发现都不能够触发动态添加后的li元素

动态生成的标签事先绑定的点击事件点击了没反应。

推测上面这个监听函数,是在网页加载的时候就指定了对象,而通过代码追加,如通过js追加的元素,是不能匹配这个事件的。

那么,我们应该使用什么来绑定动态元素呢,支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面。

例如:

$("#demo").on('click', 'li',function(){
    alert($(this).html());
});

// 或者

$(document).on('click', 'li',function(){
    alert($(this).html());
});

日夜颠倒头发少 ,单纯好骗恋爱脑 ,会背九九乘法表 ,下雨只会往家跑 ,搭讪只会说你好 ---- 2050781802@qq.com

×

喜欢就点赞,疼爱就打赏

相册 说点什么