试图阻止默认

Question

这是我正在进行的一个项目，我的客户网站上的一个小弹出式广告将告诉用户他们即将举行的夏令营。我只是希望广告在加载时显示，然后用户可以选择关闭广告或点击链接进入注册页面。

我正在尝试使此代码正常工作，但我的问题是，当我单击其中一个关闭按钮时，广告关闭，然后页面重新加载，广告又回到原来的位置。我正在尝试找出适当放置“防止默认”代码的位置，但它要么在广告第一次出现之前就可以工作，要么在此处显示的情况下......根本没有。

我意识到我同时使用 jQuery 和 JS，但我对此很陌生，我正在拼凑找到的代码。

<script type="text/javascript">
$(".close").click(function(){
$("#summercampad").addClass("hidden");
onload.preventDefault();

});

window.onload = function () {
document.getElementById("summercampad").className =
document.getElementById("summercampad").className.replace
  ( /(?:^|\s)hidden(?!\S)/g , '' )
};

</script>
<div id="summercampad" class="hidden" >
<div id="popupcontainer">
    <div id="closepopup">
        <a href="#" class="close"><img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/closebtn.png?t=1429039040" alt="close"/>     </a>
    </div>
    <div id="pic">
        <img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/popuppic.jpg?t=1429038436" alt="basketball"/>
    </div>
    <div id="popuptext">
        2015 SUMMER CAMPS<br> 
        BOYS &amp; GIRLS • ANY SKILL LEVEL<br>
        <span>SPACE LIMITED - SIGN UP NOW!</span>
    </div>
    <div id="registerbtn" >
        <a href="/camp-registration/">
        <img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/registerbtn.png?t=1429039883"/>
        </a>
    </div>
    <div id="nobtn">
        <a href="#" class="close">
        <img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/nothanksbtn.png?t=1429039884"/>
        </a>
    </div>
</div>

Answer 1

我相信这就是你想要的

$(".close").click(function(e) {
  $("#summercampad").addClass("hidden");
  e.preventDefault();
});

你也可以使用

$('#summercampad').removeClass('hidden');

而不是

document.getElementById("summercampad").className =
document.getElementById("summercampad").className.replace
  ( /(?:^|\s)hidden(?!\S)/g , '' )

http://api.jquery.com/event.preventdefault/

The difference between ‘return false;’ and ‘e.preventDefault();’

Answer 2

下面的代码应该可以解决问题。您要做的是禁止加载。这可以使用 $(document).ready() 来实现。我建议将函数放在页面末尾。

    <script type="text/javascript">
$(document).ready(function(){
    $(".close").click(function(e){
    e.preventDefault();
        $("#summercampad").addClass("hidden");
        return false;
    });
});
   </script>

Answer 3

只需在末尾添加：return false。它将阻止操作按您的意愿执行。

<script type="text/javascript">
$(".close").click(function(){
    $("#summercampad").addClass("hidden");
    return false;
});
...

一切都在另一个帖子中描述：return false from jQuery click event

还有

您需要首先声明您的 HTML，然后是您的 jQuery。就像您现在所做的那样，$(".close") 返回 null，因为您的浏览器尚未解析 HTML。

对您来说最好的解决方案是使用$(document).ready()

你的代码应该是：

<script type="text/javascript">
    $(document).ready(function () {
        $(".close").click(function(){
        $("#summercampad").addClass("hidden");
        return false;
    });
});
...

这种方式首先加载 HTML，然后 jQuery 在现有标记上绑定点击事件；）。

Answer 4

您似乎缺少绑定函数中的参数。尝试改变这个：

$(".close").click(function(){
    $("#summercampad").addClass("hidden");
    onload.preventDefault();
});

到这里：

$(".close").click(function(event){
    $("#summercampad").addClass("hidden");
    event.preventDefault();
});

（来源：http://www.w3schools.com/jquery/event_preventdefault.asp）

Answer 5

 <script type="text/javascript">
    $(".close").click(function(e){
    e.preventDefault();
        $("#summercampad").addClass("hidden");
        return false;
    });
   </script>