js 禁止点击标注

在JavaScript中实现禁止点击标注的功能，通常涉及到事件监听和阻止默认行为或事件传播。以下是一些基础概念和相关方法：

基础概念

事件监听：通过JavaScript为DOM元素添加事件监听器，以便在特定事件发生时执行代码。
阻止默认行为：使用event.preventDefault()方法阻止元素的默认行为，例如链接跳转或表单提交。
阻止事件传播：使用event.stopPropagation()方法阻止事件冒泡到父元素。

实现方法

假设我们有一个标注元素，我们希望禁止用户点击它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>禁止点击标注</title>
    <style>
        .annotation {
            width: 200px;
            height: 100px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 100px;
            cursor: not-allowed; /* 鼠标悬停时显示禁止点击的图标 */
        }
    </style>
</head>
<body>
    <div class="annotation" id="annotation">标注区域</div>

    <script>
        document.getElementById('annotation').addEventListener('click', function(event) {
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件传播
            alert('点击被禁止');
        });
    </script>
</body>
</html>

解释

HTML部分：创建一个带有id为annotation的div元素，表示标注区域。
CSS部分：设置标注区域的样式，并使用cursor: not-allowed;使鼠标悬停时显示禁止点击的图标。
JavaScript部分：
- 使用document.getElementById('annotation').addEventListener('click', function(event) {...});为标注区域添加点击事件监听器。
- 在事件处理函数中，调用event.preventDefault()阻止默认行为（虽然在这个例子中没有默认行为，但这是一个好习惯）。
- 调用event.stopPropagation()阻止事件传播到父元素。
- 使用alert('点击被禁止');提示用户点击被禁止。