js怎么防止重复点击

JavaScript014

js怎么防止重复点击,第1张

1.防止重复点击可以添加标记,第一次点击后变为false,每次点击判断这个标记是true才执行

2.如果是按钮防止重复点击,可以再按钮点击后,给按钮添加disabled属性,按钮就再也点击不了

举个例子:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<button onclick="fn()">方式一</button>

<button onclick="alert('只会出现一次哦,之后想点都点不了')this.disabled = true">方式二</button>

<body>

<script>

    //第一种方式

    var flag = true

    function fn(){

        if(flag){

            flag = false

            alert('只会出现一次哦')

        }

    }

</script>

</body>

</html>

setTimeout() 和 cleartimeout() 是逆过程 可以查看用法是否正确，我处理过的一段 如下 var action=setTimeout(function(){...},1000)if(action) clearTimeout(action)

右键点击没试过，不过如果是左键点击的话就需要用到 鼠标点击的坐标与元素相对位置 的判断了

举个栗子

<style>

div{

background: red

width: 100px

height: 100px

}

</style>

<div id="one" onclick="fa(this)">

<div id="1" style="position: absolute">1</div>

<div id="2" style="position: absolute">2</div>

<div id="3" style="position: absolute">3</div>

</div>

<script>

function fa(a){

var arr = [] //点击位置元素ID集合

var x = event.clientX //鼠标x坐标

var y = event.clientY //鼠标y坐标

var childs = a.children

for (var i = 0i < childs.length i++){

var left = childs[i].offsetLeft //子元素左边界坐标

var right = childs[i].offsetLeft + childs[i].offsetWidth //子元素右边界坐标

var top = childs[i].offsetTop //子元素上边界坐标

var bottom = childs[i].offsetTop + childs[i].offsetHeight //子元素下边界坐标

if (left < x && right > x && top < y && bottom > y){

arr.push(childs[i].id) //将符合条件的元素ID加入集合

}

}

alert("鼠标点击位置下的所有子元素的id:" + arr)

}

</script>