Chrome忽略jquery点击功能答案

【问题标题】：Chrome ignoring jquery click functionChrome忽略jquery点击功能
【发布时间】：2020-01-23 22:51:15
【问题描述】：

我有以下在 IE 中运行良好的 html/代码，但是当我在 Chrome 中单击链接时，没有任何反应。 HTML如下：

<h1 id="pagetitle">Daina - kora dziesmu kr&#257jums</h1>
<div class="frontpage">
<p id="arvilcinu"><a href="">Ar vilci&#326u R&#299ga braucu</a></p>
</div>
<!--***************** Ar Vilcinu *******************-->
<div id="arvilcinudisplay" class="singlesong">
<p><a href="Ar vilcinu riga braucu.pdf">Click here to download PDF file for printing</a></p>
<p><a href="http://www.youtube.com/watch?v=XuRxjjEaJVQ" target="_blank">Click here to watch the video - sung by Daina</a></p>
<p id="back"><a href=""><img src="backbutton.jpg" alt="Back to Main menu" height="40" width="100"></a></p>
</div>

脚本的jquery位如下：

$("#arvilcinu").click(function(){
    $(".frontpage").fadeOut(1000,function(){
        document.getElementById("pagetitle").innerHTML = "Ar vilci&#326u R&#299ga braucu";
        $("#arvilcinudisplay").css("display","block");
    });
});

这个想法是，当用户单击链接 (id=arvilcnu) 时，链接会淡出，然后显示相关信息。单击 Chrome 中的链接只会使屏幕闪烁一秒钟，但屏幕上没有任何变化。

谢谢

【问题讨论】：

标签： javascript jquery html google-chrome

【解决方案1】：

您需要使用preventDefault() 来删除链接的自然行为并触发您编写的点击事件，如下所示：

你也可以只用 jQuery 编写代码（没有 javascript）--

$("#arvilcinu").click(function(e){
     e.preventDefault();
    $(".frontpage").fadeOut(1000,function(){
        $("#pagetitle").html("Ar vilci&#326u R&#299ga braucu");
        $("#arvilcinudisplay").show();
    });
});

Working Demo

【讨论】：

谢谢大家 - 工作愉快！那么为什么这在 IE 中有效，但在 Chrome 中无效？有什么方法可以默认设置，这样我就不必为所有链接调用 preventDefault？
我不确定为什么它在 IE 中工作。但是我只是在 JSFiddle 中尝试了您的代码并找出了问题所在。欲了解更多信息，请参阅api.jquery.com/event.preventdefault
一旦我得到它背后的原因，我会更新你:)
这可能会帮助你stackoverflow.com/questions/21033728/…
感谢您的友好回复。它可能与我的href是空白的事实有关，所以我真的只是“模拟”一个链接。其工作的IE版本是IE8 btw ...

【解决方案2】：

这是因为当你点击链接时会发生这两个事件。一个是您的锚标记<a href="" >...，另一个是您在ID 为arvilcinu 的元素上的点击事件。锚标记位于 <p id="arvilcinu"> 内部，这会导致这种行为。
您需要防止 <a> 标记的默认行为，这将通过在事件上使用
event.preventDefault() 函数来完成。

如果调用此方法，则不会触发事件的默认动作。

您的代码应如下所示：

$("#arvilcinu").click(function(e){
     e.preventDefault();
     // rest of you logic on click event
});

【讨论】：