css 双击不选中文字

CSS中提供了一个非常方便的选项，使我们不必使用JavaScript就可以把双击事件加到我们的网页上。而且，我们可以用CSS来防止用户选中网页上的文本内容，让页面看起来更整洁。

style>
/* 防止文本选中 */body {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
}
/* 双击事件 */p {
        cursor: pointer;
}
p:hover {
        background-color: yellow;
}
p:active {
        background-color: orange;
}
    /style>
    

在上述代码中，我们使用了user-select属性来防止文本选中，以及cursor、hover、active等伪类来实现双击事件。

如果您想要在网页上添加双击事件，可以像下面这样添加：

p>
    双击我！/p>
    script>
// 点击事件document.querySelector('p').addEventListener('dblclick', function(event) {
        alert('hello world!');
}
    );
    /script>
    

如果你用了防止文本选中的技巧，再加上双击事件，用户就可以舒适地使用你的网站而不会因为意外选择了一些文本内容。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！