Question

我理解这个问题已被多次询问，但是，在我的情况下，没有一个解决方案似乎有效。因此请求。

我使用以下脚本：

<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标记，添加{{1} } return false标记本身。似乎没有什么工作。我在firefox和chrome上测试它。

我不确定li，jquery或sly是否与preventDefault（）冲突。当我运行w3schools中给出的演示代码时，它可以很好地工作。

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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内联处理程序

Answer 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>

在小提琴here处查看输出。

Answer 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);"

JavaScript上点击ul li a href - 防止默认不起作用

4 个答案: