Question

我有一个链接（#my-link），可以在桌面上悬停时打开div（＃my-menu）。这个div内有小菜单。

现在我正试图通过点击功能在移动设备上运行。

我有这段代码，但我无法点击div中的链接：

$('#my-link').on('touchstart', function (e) {        
     e.preventDefault();        
     $('#my-menu').load(...Im loading content here...);
     $('#my-menu').toggle();
});

有任何帮助吗？我认为preventDefault会阻止这些链接......

Html标记：

<a href="example.com" id="my-link">Lorem ipsum</a>
<div id="my-menu">
<a href="example.com">Lorem ipsum</a>
<a href="example.com">Lorem ipsum</a>
<a href="example.com">Lorem ipsum</a>
</div>

修改

我能够解决包装链接标记的问题，例如：

<div id="my-link"><a href="example.com">Lorem ipsum</a></div>

然后将第一行脚本编写为：

$('#my-link > a').on('touchstart', function (e) {

Answer 1

event.preventDefault()阻止元素的默认操作执行，因此在这种情况下，<a></a>标记的默认值是向服务器发送请求。某些代码没有默认操作，因此您应该使用<div></div>，<h1></h1>或其他代码等标记。如果您需要使用<a></a>标记，请执行<a href="javascript:void(0)"></a>，以防止该链接执行任何操作。

More Info on event.preventDefault()

Touchstart和preventDefault阻止子链接

1 个答案: