我有一个链接与一个href和onClick功能。
<a href={menuItem.url} onClick={e => {
var checkedItems = document.querySelectorAll("input:checked") as NodeListOf<HTMLInputElement>;
for (let i = 0; checkedItems[i]; i++) {
checkedItems[i].checked = false;
}
window.location.href = menuItem.url; }}>
字符串
我想在那里的href链接,使用户可以看到的URL时,悬停,但我只想onclick被执行
e.stopPropagation();
e.preventDefault();
e.nativeEvent.stopImmediatePropagation();
return false;
型
但似乎都不管用。
2条答案
按热度按时间vltsax251#
一种解决方案是在
<a>
元素中添加一个新的“内部元素”,例如<span>
,并将event.stopPropagation()
的onClick
事件处理程序绑定到该内部元素。这将导致
<span>
拦截并停止点击事件的传播,然后再将其冒泡到父<a>
(默认情况下,这将导致浏览器导航到href
url)。您应该会发现,当鼠标悬停在
<a>
的href
属性上时,此方法仍然为用户保留了指定给<a>
属性的url的可见性:字符串
为了让这个方法工作,它假设在
<a>
的框边界(外边界)和内部<span>
. Here's a jsFiddle(非jsx)的框边界之间没有填充,这说明了一般的想法。希望能帮上忙!
bnl4lu3b2#
字符串