在标签内反应 JS onClick 事件

Posted 2023-02-24

【中文标题】在标签内反应 JS onClick 事件

【英文标题】：React JS onClick event inside a tag

【发布时间】：2020-01-15 13:48:29

【问题描述】：

我有这段代码，它是一个标签，里面有一个onClick 事件。我的问题是，当我在浏览器中单击 div 时，会触发 href 并且我正在访问另一个站点。有没有办法确保只有 onClickis triggered when clicking onchnageOrderonClick` 和链接在单击 a 标签的其余部分时有效？

  <div key=idx.toString()>
    <a className="stage-container" href=stageUrl>
      <h3>stage.title</h3>
      <div className="arrow-container">
        <div
          className=""
          onClick=() =>  
            changeOrder(stage.id, stage.title, stage.order - 1)
          
        >
          <i className="fa fa-caret-up" />
        </div>
        <div
          onClick=() =>
            changeOrder(stage.id, stage.title, stage.order + 1)
          
        >
          <i className="fa fa-caret-down" />
        </div>
      </div>
    </a>
    <div className="substages-container">
      sortSubstages.map((substage, index) => (
        <SubstageItem 
          className="substage-container" 
          key=index.toString() 
          substage=substage 
          reload=reload 
        />
      ))
    </div>
  </div >

【参考方案1】：

试试：

onClick=(e) => 
    e.preventDefault();
    e.stopPropagation();
    changeOrder(stage.id, stage.title, stage.order - 1);
  

【参考方案2】：

您可以使用PreventDefault 来避免触发href 链接。 你可以看看https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

HandleChangeOrder = (event,stageid, stagetitle, stageorder) =>
event.PreventDefault();
//your changeOrder method instructions


//Call
<div className="" onClick=() => changeOrder(this.HandleChangeOrder)>