3

由于限制，即使它是我完全避免的，在某些情况下我必须使用 javascript: 在 achor 标记的 href 属性中的语法。

（说明：在我的 CMS 中，我使用富文本编辑器来允许用户更改文本元素，包括链接。在某些情况下，需要特定的 javascript: 调用，并且我从链接编辑功能中完全禁止了 onclick（以简化过程对于用户）。但是，由于其中一个链接出现在对 onclick 事件做出反应的块中，所以事情会双重触发）

像这样：

<a href="javascript:doSomething()"></a>

我的问题是该链接位于已经对 onclick 事件作出反应的容器内。因此我想将事件对象传递给 doSomething() 方法，这样我就可以使用 jQuery 的

event.stopPropagation()

方法。

然而不幸的是，似乎传递事件对象

<a href="javascript:doSomething(event)"></a>

似乎根本不起作用。Safari 什么也不说，而 Firefox 会报告ReferenceError: event is not defined

我假设是这种情况，因为 href="" 不是脚本启动属性（例如 onclick）。问题是在这种情况下，我将无法访问超出我已经做过的标签。

因此我要么需要

1.) 一种从 href 属性中将事件对象传递给 doSomething() 函数的方法

或者

2.) 一种通过其他方式在该锚点（点击后）停止事件传播的方法。

感谢您的任何建设性意见！

4

4 回答 4

9

您无法停止从href属性传播事件，因为：

  1. 当href代码执行时，它不是一个事件。它只是执行该代码，类似于“位置破解”。就像javascript:doSomething()在浏览器的地址栏中输入一样。

  2. href 代码在链接上触发事件 后执行——包括冒泡。

    您可以在这个 jsFiddle中看到这种行为。请注意，在代码执行之前，当链接被点击时mouseup，mousedown, 和clickall 都会为链接和容器触发。href

如果有要阻止的事件侦听器，则必须找到另一种方法。

但是，如果您可以将 javascript 附加到文档中，则可以阻止hrefusing preventDefault()。

例如：

  • jQuery，在 1.7 版之前：

    $("#container a").bind ("mousedown mouseup click", function (e) {
    e.preventDefault();
} );

  • jQuery 1.7 及更高版本：

    $("#container a").on ("mousedown mouseup click", function (e) {
    e.preventDefault();
} );

    或更好）：

    $("#container").on ("mousedown mouseup click", "a", function (e) {
    e.preventDefault();
} );


您可以在 jsFiddle 看到最新版本。

于 2012-10-12T01:51:39.197 回答
1

如果您无法更改链接本身（使用 onclick），那么您唯一的选择是更改容器的 onclick 处理程序。

你能做类似的事情吗

function containerClickHandler(e) {
  e = e || event;
  var el = e.target || e.srcElement;
  if (el.nodeName === 'A' && someOtherMatchChecks) {
       // eat event
  }
  else {
       // process event
  }
}
于 2012-10-12T02:01:13.533 回答
1

好吧，这是一个老问题，但在我的特殊情况下，我确实找到了一个解决方法，但它可能只适用于部分情况。我有一个有 onclick 的 div。但是，如果单击该 div 内部，我不希望该 div 的 onclick 触发。这是我所做的：

function myOnClick () {

  // loop over all <a>'s, and test if they are hovered over right now.
  var allLinks = document.links;
  var dont = 0;
  for (var i = 0, n = allLinks.length; i < n; i++) {
    // pure javascript test to see if element is hovered.
    if(allLinks[i].parentElement.querySelector(":hover") === allLinks[i]) {dont = 1; }
  };

  if(dont)return;

  // your stuff here, only fires when dont is false.

}

我在这里了解了查询选择器技巧：https ://stackoverflow.com/a/14800287/2295722

于 2013-11-26T18:46:22.330 回答
0

如果您在 href 属性中编写 javascript，我不知道是否有办法获取参数。但是您可以在 onclick 中按以下方式获取它，但是正如您所说，这不是最佳实践：

<a onclick="console.log(arguments)">your link</a>

在参数数组中，您将获得您的事件对象。

这是一个演示：

http://jsfiddle.net/tEw5J/1/

于 2012-10-12T01:23:58.110 回答