javascript - return之后,怎么才能使a链接恢复默认行为(打开新页面)
巴扎黑
巴扎黑 2017-04-10 15:36:01
[JavaScript讨论组]

看这段代码, js上设置了点击图片return false, 那么现在怎么做(原始的js不能删除)才能让a链接正常跳转

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
</head>
<body>
<a href="http://www.foo.local" target="_blank">
    <img src="http://img4.duitang.com/uploads/item/201312/22/20131222171841_ACnHw.thumb.600_0.jpeg" alt="">
</a>
<script>
    $('img').on('click', function(){
        return false;
    });
</script>
</body>
</html>

实际的场景是这样的:在一个复杂的页面中,有一个按钮,点击之后会弹出一个users列表。这个弹框的结构稍稍有点复杂(树形层次有5-10层)。需要点击其他区域时隐藏该弹框而在弹框内部点击则不隐藏。最后,点击user头像/名字时跳转到其用户页面

巴扎黑
巴扎黑

全部回复(6)
大家讲道理
html<a href="http://www.foo.local">
    <img class='pik' src="http://img4.duitang.com/uploads/item/201312/22/20131222171841_ACnHw.thumb.600_0.jpeg" alt="">
</a>
<script>
    $('img').on('click', function(){
        return false;
    });
    $('.pik').click(function(){
        var href = $(this).parent('a').attr('href');
        window.location.href=href;
    });
</script>
ringa_lee

不能删 能不能改呢?

$('img').on('click', function(e){
var e = event || window.event;
e.stopPropagation();
});

天蓬老师

为什么我尝试了下,不设置图片的return false,点击图片的时候也是自动跳转a连接的啊.

大家讲道理

把1楼的代码稍微修改一下就可以了

<a href="http://www.foo.local">
    <img class='pik' src="http://img4.duitang.com/uploads/item/201312/22/20131222171841_ACnHw.thumb.600_0.jpeg" alt="">
</a>
<script>
    $('img').on('click', function(){
        return false;
    });
    $('.pik').click(function(){
        var href = $(this).parent('a').attr('href');
        window.open(href); // 用window.open()就可以
    });
</script>
伊谢尔伦
<a href="http://www.foo.local" target="_blank">
    <img id="img" src="http://img4.duitang.com/uploads/item/201312/22/20131222171841_ACnHw.thumb.600_0.jpeg" alt="">
</a>

document.getElementById('img').addEventListener('click', function (e) {
  return false;
});
伊谢尔伦
$('img').off('click').on('click', function(){
    //return false;
});
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号