在标签内对 JS onClick 事件做出反应

Question

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

<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 链接。 你可以看看 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)}>