js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

2023年6月10日下午2:10 • JavaScript

JS鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

鼠标点击事件是Web开发中使用最频繁的交互功能之一，其中又以JavaScript作为事件的绑定和处理工具最为常见。本文将介绍js鼠标点击事件在各个浏览器中的写法以及Event对象属性介绍。

鼠标点击事件写法介绍

基础事件绑定及处理函数

首先，我们需要了解在各个浏览器中的鼠标点击事件绑定函数，其中addEventListener是标准事件绑定函数，不同的浏览器可能有不同的函数。

// 添加鼠标点击事件监听，绑定函数为clickEvent
if(document.addEventListener) {
    document.addEventListener('click', clickEvent);
} else if(document.attachEvent) {
    document.attachEvent('onclick', clickEvent);
}

鼠标点击事件处理函数

事件处理函数是在相应事件发生时执行的函数。在鼠标点击事件中，事件处理函数会包含一个事件对象event，我们可以通过该对象获取鼠标点击位置、按键等信息。

function clickEvent(event) {
    // 取消事件默认行为
    event.preventDefault();
    // 获取点击位置
    var x = event.pageX;
    var y = event.pageY;
    // 获取按键状态
    var leftClicked = event.button === 0;
    var rightClicked = event.button === 2;
}

事件委托及冒泡

事件委托

事件委托是一种事件处理的优化技术，它可以将多个子元素的相同事件委托给它们的父元素处理，以减少事件处理函数的数量，并提高性能和维护性。

// 点击元素添加一个子元素，并触发点击事件
var parent = document.getElementById('parent');
parent.addEventListener('click', function(event) {
    // 防止事件冒泡
    event.stopPropagation();
    if(event.target.className === 'btn-add') {
        var child = document.createElement('div');
        child.className = 'child';
        parent.appendChild(child);
        // 触发子元素的点击事件
        child.click();
    }
});

// 每个子元素绑定的点击事件
document.addEventListener('click', function(event) {
    if(event.target.className === 'child') {
        console.log('click on child');
    }
});

事件冒泡

事件冒泡是指事件在触发元素后，会一层层向外冒泡传递到它的父元素，直至document对象为止。我们可以利用这一机制来进行事件委托。

// 添加多个元素并绑定点击事件
var elements = document.getElementsByTagName('div');
for(var i=0; i<elements.length; i++) {
    elements[i].addEventListener('click', function(event) {
        console.log('click on ' + this.id);
    });
}

Event对象属性介绍

button

button属性可以获取鼠标按键的状态，返回值为0、1或2，分别表示左键、中键和右键。

if(event.button === 0) {
    console.log('left button clicked');
} else if(event.button === 1) {
    console.log('middle button clicked');
} else if(event.button === 2) {
    console.log('right button clicked');
}

pageX, pageY

pageX和pageY属性可以获取鼠标点击位置的坐标，相对于文档的左上角。

var x = event.pageX;
var y = event.pageY;

target

target属性可以获取事件的触发元素。

var targetElement = event.target;

stopPropagation()

stopPropagation()方法可以取消事件的进一步传递，防止事件冒泡。

event.stopPropagation();

示例说明

下面是两个鼠标点击事件的实例：

实例1

在这个案例中，我们创建了一个按钮，当用户点击按钮时，文本会在网站的顶部添加一行显示该动作的内容。

<!DOCTYPE html>
<html>
<head>
    <title>JS鼠标点击事件绑定实例</title>
    <script>
        function handleClick(event) {
            var newLine = document.createElement('p');
            newLine.innerHTML = 'Button is clicked.';
            document.body.insertBefore(newLine, document.body.firstChild);
        }

        function init() {
            var btn = document.getElementById('myButton');
            btn.addEventListener('click', handleClick);
        }

        window.addEventListener('load', init);
    </script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

实例2

在这个案例中，我们将创建一个元素，其名为container，我们将在内部放置几个嵌套的元素，然后监听来自于用户的每一次点击事件。所有点击事件都会被处理返回，也就是我们会在控制台上看到点击的信息。

<!DOCTYPE html>
<html>
<head>
    <title>JS鼠标点击事件委托实例</title>
    <script>
        function handleClick(event) {
            var elem = event.target;
            console.log(elem.tagName + ' was clicked!');
        }

        function init() {
            var container = document.getElementById('container');
            container.addEventListener('click', handleClick);
        }

        window.addEventListener('load', init);
    </script>
</head>
<body>
    <div id="container">
        <div>
            <button>点击</button>
        </div>
        <div>
            <a href="#">链接</a>
        </div>
    </div>
</body>
</html>

总结

本文介绍了js鼠标点击事件在各个浏览器中的写法以及Event对象属性介绍。如果您掌握了这些知识并且在实践中熟练应用，将会大大提高您的网站开发效率并且改善用户的交互效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍 - Python技术站