为什么对dragstart事件的preventDefault会保留选中的元素？
我试图使用以下Javascript阻止我的页面上的任何拖放:
document.addEventListener('dragstart', function (e) {
e.preventDefault();
});
不幸的是,即使这确实阻止了拖放行为,拖动的元素也会保持选中状态(就像鼠标悬停在元素上一样),直到选择了另一个元素.
例如,如果我单击并拖动"AD CONFIG",您可以看到它仍然显示为鼠标在链接上方:
如何在仍然触发相应事件的同时禁用拖放以防止上述行为发生？
编辑:这是一个Plunker:http://plnkr.co/edit/pWZqe7uohqlVxMwyAS4d？p = preview
我猜这与浏览器行为有很大关系.你可以用这种方式破解它,:hover用来添加underline:
#status-buttons a {
text-decoration: none;
}
#status-buttons a:hover {
text-decoration: underline;
}
// Code goes here
document.addEventListener('dragstart', function(e) {
e.preventDefault();
});/* Styles go here */
/* Numbered buttons */
#status-buttons {} #status-buttons a {
color: #000;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-align: center;
text-transform: uppercase;
}
#status-buttons a {
text-decoration: none;
}
#status-buttons a:hover {
text-decoration: underline;
}
#status-buttons span {
background: #222222;
display: block;
height: 30px;
margin: 0 auto 10px;
padding-top: 5px;
width: 30px;
border-radius: 50%;
}
#status-buttons a.active span {
background: #0099CC;
}<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" />
<script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="status-buttons" class="text-center">
<a class="active" href="#">
<span></span> Authenticate</a>
<a href="#">
<span></span> Target Disk</a>
<a href="#">
<span></span> AD Config</a>
<a href="#">
<span></span> Network Options</a>
<a href="#">
<span></span> Imaging</a>
</div>
</body>
</html>| 归档时间： |
|
| 查看次数： |
151 次 |
| 最近记录： |