Question

我有一个问题，我怀疑这是可能的。问题如下：

如果没有激活锚标记，我的onclick如何执行？

onclick将显示免责声明消息。

示例代码：

df.set_index('date').a.dropna().reindex(df.date, method='nearest').reset_index()

                 date          a
0 2017-04-24 01:00:00  [1, 0, 0]
1 2017-04-24 01:20:00  [1, 0, 0]
2 2017-04-24 01:40:00  [1, 0, 0]
3 2017-04-24 02:00:00  [0, 1, 0]
4 2017-04-24 02:20:00  [0, 1, 0]
5 2017-04-24 02:40:00  [1, 0, 0]
6 2017-04-24 03:00:00  [0, 0, 1]
7 2017-04-24 03:20:00  [0, 0, 1]
8 2017-04-24 03:40:00  [1, 0, 0]
9 2017-04-24 04:00:00  [1, 0, 0]

提前致谢：）

Answer 1

我会写一个专门的函数来处理你的点击。

<span onclick="clickHandler">...</span>

请参阅下面的点击处理程序。如果要阻止javascript事件的默认行为，在单击事件的情况下，可以使用e.preventDefault（）和e.stopPropagation（）。

function clickHandler(e) {
      e.preventDefault()
      e.stopPropagation()
}

这将阻止浏览器遵循该链接重定向的默认行为。 e.stopPropagation（）将阻止事件冒泡到其父级，在本例中是父级元素。

Answer 2

<a href="http://www.websiteurl.com">

    <p>Sample text<p><span onclick="alert('hello');return false">try me</span>

</a>

请注意，使用此方法时，应始终将脚本包装在try catch块中，因为如果您的代码抛出错误，则会单击父链接。

    <a href="http://www.websiteurl.com">

        <p>Sample text<p><span onclick="try {alert('hello'); } catch(e) {}; return false">try me</span>

    </a>

Answer 3

<a href="websiteurl.com">
    <p>Sample text<p>
</a>
<span onclick="this.parentNode.querySelector('div.class-message').classList.toggle('class-show');">try me</span>

这就是你应该这样做的方式，因为没有必要在锚点内部保持span标签，“this.parentNode”会定位锚元素，所以querySelector将无法工作，除非你在锚点内有你的div

Answer 4

防止在点击事件上调用锚链接：

分配最高父级的点击监听器（在锚标签后面）
通过调用其preventDefault方法

var container = document.querySelector('#container');

container.addEventListener('click', function(event) {
  event.preventDefault();
  var msgBlock = container.querySelector('.disclaimer-message');
  msgBlock.classList.toggle('disclaimer-show');
  msgBlock.classList.toggle('hide');
});

a {
  text-decoration: none;
}

.disclaimer-show {
  color: red;
  font-weight: bold;
}

.hide {
  display: none;
}

<a href="websiteurl.com">
  <div id="container">
    <div class="content-wrapper">
      <div class="image">
        <img src="...." />
      </div>
      <div class="disclaimer-message hide">disclaimer text</div>
      <div class="text-wrapper">
        <p>Sample text</p><span>?</span>
      </div>
    </div>
  </div>
</a>

Onclick需要忽略父href

4 个答案: