jQuery事件弹出窗口，取消不跳转

前端编程 javascript

创建时间:2019-09-02 13:34

阅读:

今天给大家说一下js中弹出窗口的事件
一、实际情况
二、代码讲解
javascript写法
jQuery写法
小伙伴们快去尝试吧

今天给大家说一下js中弹出窗口的事件

一、实际情况

我们在浏览一些‘不良’网站的时候，单击网页跳转的时候，经常会淡出对话框，问你次网站可能存在风险，是否确定跳转，点击确定则进入到该网站，点击取消则不进入该网站，那么如果实现的呢？

二、代码讲解

加入我们在body标签里面有一个a标签，id为TZ，href属性为一个需要跳转的网址，如：

<body>
    <a href="需要跳转的网址">点我跳转到目标网址</a>
</body>

下面给大家展示一下javascript写法和jQuery的写法。来实现这样的功能。

javascript写法

这段代码写在body标签里面就行了

<script type="text/javascript">
    document.getElementById("TZ").onclick = function(e){
    var en = e || window.event
    var info = window.confirm("您访问的网站存在风险，是否继续访问")
    if (info == false){
        en.preventDefault()
        //或者直接写return false
        //这个叫做关闭默认行为
    }
}

其实用js写代码的时候，上面的代码对于只有一个js行为作用在上面的时候，影响不大，但是如果存在多个行为在这个标签上面就会出现非常严重的问题，也就是事件覆盖的现象，以此，下面，我给出规范点的写法。

<script type="text/javascript">
    var jstz = document.getElementById("TZ")
    jstz.addEventlistener("mousedown",funTZ,false)
    function funTZ(e){
    var en = e || window.event
    var info = window.confirm("您访问的网站存在风险，是否继续访问？")
    if (info == false){
        return false
    }
}

以上就是比较好的js写法，这样当添加多个事件的时候是不会出现任何覆盖的问题的，可以看到，我们给每个事件添加函数的时候，函数的名字都是不同的，所以说不同事件触发的功能也是不相同的。

jQuery写法

使用jQuery的时候，我们必须在body标签的上面导入jQuery，其实就是在head里面导入就可以了。因为我用的编辑器是HBuilder，所以jquery可能自带的是百度的。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

另外jQuery的语法和javascript是有点区别的，一下的代码是写在body里面的。

<script type="text/javascript">
    $(document).ready(function(){
    //所有的jQuery写在这个里面，当然也有简写
})
</script>

以下给出两种简写

//这是第一种
<script type="text/javascript">
    $().ready(function(){
    //所有的jQuery写在这个里面
})
</script>
//这是第二种
<script type="text/javascript">
    $(function){
    //所有的jQuery写在这个里面
})

但是我觉得这么点的代码还是不需要简写了吧，下面给出完整的代码。

<script type="text/javascript">
    $(document).ready(function(){
        $("#TZ").bind("click",function(e){
            var info = window.confirm("您访问的网站存在风险，是否继续访问?")
            if (info == false){
                return false
                //但是既然我上面用了e，那么也给出e的写法，其实跟javascript是一模一样的。
                //e.preventDefault()
            }
    })
})
</script>

小伙伴们快去尝试吧

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1990858822@qq.com