如何在js中阻止页面中的a标签的href链接

2017-03-27  本文已影响0人  lMadman

需求:页面中有个小问号,点一下弹出一个说明框,再点其他地方消失,且如果其他地方有a标签的话不去触发a标签的href链接;
先来看一下效果:



1.点击问号,弹出说明框;
2.点击页面中其它任何一个部分,都不触发任何事件,只会先让说明框消失;

需要注意的是,这并不是一个真正的带阴影的dialog,所以点击其它地方还是容易触发其他事件的,来看一下js代码处理:

 $('a').on('click',function () {
        if($('.answer-dialog').css('opacity') == 1){
            $('.answer-dialog').css({'transform':'scale(0.01)','opacity':0});
            return false; 
            //这个是重要的,其实这种方式很多时候都会用到,只是在这里不容易想到而已;
        }
    });
    $('.answer').on('click',function (e) {
        e.stopPropagation();
        $(this).find('.answer-dialog').css({'transform':'scale(1)','opacity':1});
    });
    $('html,body').on('click',function (e) {
        e.stopPropagation();
        $('.answer-dialog').css({'transform':'scale(0.01)','opacity':0});
    });
上一篇 下一篇

猜你喜欢

热点阅读