在标签内反应 JS onClick 事件

Question

我有这段代码是一个标签，里面有一个 onClick 事件。我的问题是，当我在浏览器中单击 div 时，href 被触发，我将转到另一个站点。有没有办法确保只有 onClickis triggered when clicking onchnageOrder</code>onClick` 和 link 在单击 a 标签的其余部分时有效？</p> <pre><code> <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 >

Answer 1

尝试：

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

Answer 2

您可以使用 PreventDefault 来避免触发 href link。你可以看看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)}>

在标签内反应 JS onClick 事件

React JS onClick event inside a tag

html

javascript

onclick

reactjs

atag