单击 ul li a href 时的 JavaScript - 防止默认值不起作用答案

【问题标题】：JavaScript on click ul li a href - prevent default not working单击 ul li a href 时的 JavaScript - 防止默认值不起作用
【发布时间】：2018-06-16 07:26:59
【问题描述】：

我知道这个问题已经被问过很多次了，但是，就我而言，似乎没有一个解决方案有效。因此请求。

我正在使用以下脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    

<script src="modernizr.js"></script>
<script src="sly.min.js"></script>

通过 PHP 脚本，我生成了 UL Li。

echo '<p>MATCH FOLDERS</p>';
echo '<ul id="matchListUL" name="matchListUL">';
while($matdata = $matRes->fetch_assoc()) {
   echo '<li style="list-style:none" onclick="matchName(this)" id="matchList" name="matchList" value="'.implode('; ', $matdata).'" ><a id="matList" href="'.implode('; ', $matdata).'">'.implode('; ', $matdata).'</a></li>';
}
echo '</ul>'

在li 中，我包含了onclick="matchName(this)"。通过下面的 javascript 代码，我试图阻止默认

function matchName(elm) { 
  var match = elm.getAttribute('value');
  elm.preventDefault();
  return false;
}

我尝试了上述的各种组合，包括添加addEventListener 和preventDefault，将onclick 事件从li 移动到a 标记，在li 标记本身中添加return false。似乎没有任何工作。我正在Firefox和chrome上对此进行测试。

我不确定jquery、sly 或modernizr 是否与 preventDefault() 冲突。当我运行w3schools 中给出的演示代码时，它可以完美运行。

【问题讨论】：

据我所知，阻止默认值适用于事件，而不是元素。
不要使用锚点。使用按钮。

标签： javascript html preventdefault

【解决方案1】：

据我所知，阻止默认值适用于事件，而不是元素。防止默认的正确使用方法。

$('li').bind('click',{},onClicked);

function onClicked(e){
  var target = e.currentTarget;
  //Do what you want to do;
  console.log($(e.currentTarget).text())
  e.preventDefault();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>

【讨论】：

【解决方案2】：

没有内联事件处理程序可能更容易实现这一点，而是通过 jQuery：

$('li').click(function(event) { 

    var match =  this[0].getAttribute('value'); // equivalent to var match = elm.getAttribute('value'); in your original code

    event.preventDefault(); // prevent default on the event

    return false; // prevent default behavior of handler
})

在这种情况下，您将在 Dom 加载后运行此 JavaScript。您还可以删除当前代码中的 onclick 内联处理程序

【讨论】：

【解决方案3】：

您可以尝试 vanilla js 来停止阻止事件。

<ul id="matchListUL">
    <li value="1">1</li>
    <li value="2">2</li>
    <li value="3">3</li>
    <li value="4">4</li>
</ul>
<script>
    var matchListUL = document.getElementById('matchListUL');
    matchListUL.addEventListener('click', function(e) {
        alert(e.target.getAttribute('value'));
        e.preventDefault();
        return false;
    });
</script>

查看 fiddle here 的输出。

【讨论】：

【解决方案4】：

在你的 onclick 中，在调用函数之前添加event.preventDefault()：

onclick="event.preventDefault(); matchName(this);"

或者，您可以将事件传递给函数本身以及元素：

function matchName(evt,elm) { 
  evt.preventDefault();
  var match = elm.getAttribute('value');
  elm.preventDefault();
  return false;
}

然后将您的 onclick 更新为 onclick="matchName(event,this);"

【讨论】：