JS设置onClick事件

JS设置onClick事件,第1张

html页面设置onClick事件可以在html中设置,也可以在js中设置,下面分别介绍。

在html中设置

你的代码就是在html中设置的方法,这是测试页面,

现在html代码的元素中添加onclick

<input type="text" id="text" onClick="f()">

再在js代码中声明一个函数

function f(){

alert(1)

}

只在js中设置

第二种方法是只在js中设置,这是测试页面

html代码可以更加纯粹,不用写onclick

<input type="text" id="text">

在js代码中,先找到这个元素,再去绑定一个事件

window.onload  = function() {

document.getElementById("text").onclick = function() {

alert(1)

}

}

也可以实现这个效果

可以在按钮元素上增加事件属性onclick,属性内写你要执行的代码或函数。

也可以在代码中直接绑定事件,如通过querySelector等查找到元素后,在元素上直接加onclick事件。

还可以通过事件指派,绑定事件在按钮上面。

js 的单双击事件同时存在会有一个问题:双击事件会同时触发单击事件,两个事件存在冲突。

我们加一个延迟时间就能很好的解决这个问题。

原理: 当接收到第一个点击时,我们先把单击事件存储在这个是全局变量 click_store 里,如果 0.3 秒内没有接收到双击事件,就去执行它,如果接收到了,我们把它清理掉,然后去执行双击事件。setTimeout() 可以实现延迟执行。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11463577.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存