html元素添加点击效果

代码：

/*用于添加带点击效果的点击事件，element需添加data-pressed属性，
放置点击时候的class样式，
建议element使用同一个事件，通过id分发逻辑。
使用示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.pressed{color: green;}.pressed1{color: red;}</style>
</head>
<body><div id="test" data-pressed="pressed"> test </div>
<div id="test1" data-pressed="pressed1"> test1 </div>
<script type="text/javascript" src="./js/pressclick.js"></script>
<script>var listener = function(e, id) {switch(id) {case "test":console.log("test is clicked");break;case "test1":console.log("test1 is clicked");break;}}addClickListener(document.getElementById("test"), listener)addClickListener(document.getElementById("test1"), listener)
</script>
</body>
</html>*/var clickListeners = {}var isMobile = undefined;function checkMobile() {if (isMobile === undefined) {let info = navigator.userAgent;let agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod", "iPad"];for (let i = 0; i < agents.length; i++) {if (info.indexOf(agents[i]) >= 0) {isMobile = true;return true;}}isMobile = false;return false; }}function startTouch(e){let id = e.target.ide.target.classList.add(e.target.dataset.pressed)return false}function endTouch(e){let id = e.target.ide.target.classList.remove(e.target.dataset.pressed)clickListeners[id](e, e.target.id)return false}function addClickListener(element, listener){checkMobile()if (isMobile) {element.ontouchstart = startTouchelement.ontouchend = endTouch   } else {element.onmousedown = startTouchelement.onmouseup = endTouch}clickListeners[element.id] = listener}

使用方式：将代码保存为js文件，使用时引入并对element添加事件即可。

抛砖引入，不当之处敬请之处

html元素添加点击效果相关推荐

JQuery 动态生成元素添加点击事件
页面代码 <html> ... <body> <div id="divBox"></div> <script> $(fu ...
Android之给ImageView添加点击效果
1 问题给ImageView添加点击效果 2 解决办法 1).新建selector.xml文件 <?xml version="1.0" encoding="utf ...
给div添加点击效果
给div添加点击效果 .item {background: #FFF; } .item:active {background: #F0F0F0; }
js中怎么为同级元素添加点击事件
事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...
代码android点击效果,GitHub - likaiyuan559/TouchEffects: Android View点击特效TouchEffects,几行代码为所有控件添加点击效果...
Android 点击特效TouchEffects TouchEffects能够帮助你更快速方便的增加点击时候的效果,TouchEffects的目标是打造一个稳定.全面.且能更方便的自定义及个性化的一款 ...
为未来元素添加点击事件的两种写法
哈哈哈,小七来了,对于经常搬砖撸代码的猴子们,一定会遇到给好多li(死的还是动态字符串拼接生成的(对未来元素添加不到事件的看之前写的事件委托))添加点击事件第一种: var index=0; for ...
给父元素添加点击事件时，获取到的 event.target 为子元素（point-events: none 的妙用）
目录场景分析解决场景使用 ion-select 组件时,点击下拉图标点击事件的 event.target,不是图标本身的 DOM,而是图标子元素的 DOM 这会导致 popover 无法计 ...
JavaScript实现动态添加的元素添加点击事件
在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可.动态添加的元素怎么绑定事件呢? 原生JavaScript ...
jq遍历循环，给每个元素添加点击事件，并返回当前元素的索引值（闭包问题）
jq循环绑定点击事件造成闭包问题需求:给每个带有tab类名的元素点击点击事件,点击时可以添加active类名,(用于样式切换),而且还需要返回当前元素对应的索引值: 方法一(出现闭包) 先引入jq ...

html元素添加点击效果

html元素添加点击效果相关推荐

最新文章

热门文章