JavaScript-jquery/javascript阻止浏览器选中事件的默认操作
今天写一个shift + 点击 ，ctrl + 点击的多汗选择插件，完成后按住shift + 点击后多行被选中，但是同时浏览器默认也会去选中之间的文本并为其加样式，如图：
该怎么去掉浏览器的默认选择，我用preventDefault试过，没搞定。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这个问题有这么几个点：
1. 使用mousedown事件，不要使用click事件，因为click事件传播到DOM元素之后，再preventDefault已经没有意义了，因为浏览器已经先行做完了这个动作（这个是我从我的实验结果中总结出来的，没有查阅过官方文档，如果有误还请指正）。除非，你给整个页面设置为不可选择的样式，例如：-webkit-user-select:none;
2. 在document对象的mousedown事件上进行capture，但是这个capture不是所有的浏览器都支持的，jQuery 1.x也不支持。我这里是WebKit内核的浏览器，可以使用这个参数。capture的意思就是在事件的捕获阶段触发，此时会走到你的监听函数，你可以停止事件的冒泡什么的。
代码在下面，关键的地方都写了注释了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multi select</title>
<style type="text/css">
div {
border: 1px solid green;
margin-top: 10px;
padding: 6px;
width: 100px;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
div.selected {
background-color: gray;
}
</style>
<script type="text/javascript">
var selStart = null;
var selEnd = null;
function pageOnLoad() {
// 第三个参数capture为true，表示在事件捕获阶段调用注册的监听函数，此处就是对应的handleSelection
document.addEventListener("mousedown", handleSelection, true);
}
function handleSelection(e) {
// 这里的代码我只是一个简单的示例，你可以根据具体的需求来进行修改
if (e.target.tagName == "DIV") {
if (e.altKey) {
selStart = e.target;
e.target.className = "selected";
} else if (e.shiftKey) {
selEnd = e.target;
e.target.className = "selected";
}
e.preventDefault(); // 阻止默认行为
e.stopPropagation(); // 阻止事件冒泡
}
}
</script>
</head>
<body onload="pageOnLoad();">
<div id="d1">A</div>
<div id="d2">B</div>
<div id="d3">C</div>
<div id="d4">D</div>
<div id="d5">E</div>
<div id="d6">F</div>
</body>
</html>
最后，我猜想shift + 点击造成浏览器的选择是否和ctrl + a造成的选择事件是同一个道理。然后我就开始找取消CTRL + a选择的方法，最后的验证证实了我的猜想。
if (typeof document.onselectstart!="undefined")
$("table")[0].onselectstart=new Function ("return false");
else{
$("table")[0].onmousedown=false;
$("table")[0].onmouseup=true;
}
但是加入这段代码之后，table内的text也就不能被选中了。。。多少还是有点遗憾。