Question

我希望在用户点击关闭按钮时阻止页面重新加载。只有当用户点击任何期望关闭按钮时，锚点才会起作用。我使用了stopPropagation但在这种情况下似乎不起作用。这是我的fiddle

<a href="https://jsfiddle.net/9h1bw037/">
  <div>go to google</div>
  <button class="close">
    close
  </button>
</a>


$('.close').click(function(e) {
  e.stopPropagation()
  console.log('clicked')
})

Answer 1

您可以尝试使用return false 更新了fiddle

$('.close').click(function(e) {
  e.stopPropagation()
  console.log('clicked')
  return false;
})

对于反应，您可以尝试此示例fiddle

class Hello extends React.Component {
    handleClose = (e) => {
    e.stopPropagation();
    }

  handleAnchor = () => {
    window.location="https://jsfiddle.net"
  }

  render() {
    return <div>
    <a onClick={this.handleAnchor}>
      <div>Go to google</div>
      <button onClick={this.handleClose}>
        close
      </button>
    </a>
    </div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

如何防止来自子元素单击的锚点href操作

1 个答案: