html元素添加点击效果

最新推荐文章于 2024-05-09 13:39:43 发布

崔星星

最新推荐文章于 2024-05-09 13:39:43 发布

阅读量3.2k

点赞数 2

分类专栏：工具前端文章标签： javascript

本文链接：https://blog.csdn.net/divaid/article/details/119394994

版权

工具同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

代码：

/*用于添加带点击效果的点击事件，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.id
            e.target.classList.add(e.target.dataset.pressed)
            return false
        }

    function endTouch(e){
        let id = e.target.id
        e.target.classList.remove(e.target.dataset.pressed)
        clickListeners[id](e, e.target.id)
        return false
    }

    function addClickListener(element, listener){
        checkMobile()
        if (isMobile) {
            element.ontouchstart = startTouch
            element.ontouchend = endTouch   
        } else {
            element.onmousedown = startTouch
            element.onmouseup = endTouch
        }
        clickListeners[element.id] = listener
    }

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

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

崔星星

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html元素添加点击效果

代码：/*用于添加带点击效果的点击事件，element需添加data-pressed属性，放置点击时候的class样式，建议element使用同一个事件，通过id分发逻辑。使用示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"&gt
复制链接

扫一扫