Question

我正在尝试使用以下Javascript阻止我的页面上的任何拖放：

document.addEventListener('dragstart', function (e) {
      e.preventDefault();
    });

不幸的是，即使这样做确实会阻止按预期的拖放行为，拖动的元素也会保持选中状态（就像鼠标悬停在元素上一样），直到选择了另一个元素。

例如，如果我点击并拖动“AD CONFIG”，您会看到它仍然显示为鼠标在链接上方：

如何在仍然触发相应事件的同时禁用拖放以防止上述行为发生？

编辑：这是一个Plunker：http://plnkr.co/edit/pWZqe7uohqlVxMwyAS4d?p=preview

Answer 1

我猜这与浏览器行为有很大关系。你可以通过这种方式破解它，使用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>

touch checkstyle_formatter.rb

为什么dragstart事件的preventDefault会保留选中的元素？

1 个答案: