pc端移动端点击其他地方隐藏div等操作问题_编程杂谈

导读：今天做了个手机页面，点击某个按钮->弹出列表，再点击列表以外的任意位置->关闭列表，在其他浏览器里面没有问题，安卓也没有任我通，但是在IOS浏览器中并不会关闭，感觉是无法触发click事

今天做了个手机页面，点击某个按钮->弹出列表，再点击列表以外的任意位置->关闭列表，在其他浏览器里面没有问题，安卓也没有任我通，但是在IOS浏览器中并不会关闭，感觉是无法触发click事件。

来看看pc端的代码如下：

html代码

<body>

<input type="button" id="btnShow" value="按钮" />

<div id="divTop">

//列表

</div>

</body>

JS代码：

$(function () {

    $('#btnShow').click(function (event) {

        //取消事件冒泡

        event.stopPropagation();

        //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。

        $('#divTop').toggle('slow');

     return false;

    });

    //点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。

$(document).click(function(event){

      var _con = $('#divTop');   // 设置目标区域

      if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1

        //$('#divTop').slideUp('slow');   //滑动消失

        $('#divTop').hide(1000);          //淡出消失

      }

});

})

这样在pc上和安卓上都没有，但是在ios无法执行

原因是因为IOS浏览器的window、document、body并不接受click事件，按钮和链接才接受click事件

我们做一个比喻来理解这个事件是怎么运作的：

屏幕被点击后，系统会发送一个事件公告(click),链接和按钮收到这个公告后会处理相应的行为（比如打开个新页面，提交表单，用户绑定的其他行为）
window、document、body并不会搭理这个公告，跟没看到似的，自然也就没有弹窗出现
body只接受内部的冒泡事件，点击按钮后触发了按钮的click事件，然后按钮会告诉自己的上级（body）：老大，我被点击了，
body会说：好的，我会处理的，这时候弹窗就出来了。
body里面的div，span等标签默认是不会理睬click事件公告的，但是我们可以开启他，开启后他们就跟按钮一样，可以接受click事件，并汇报给上级。

开启方法：给标签绑定一个任意事件，注意标红色的地方

$(function () {

    $('#btnShow').click(function (event) {

        //取消事件冒泡

        event.stopPropagation();

        //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。

        $('#divTop').toggle('slow');

     return false;

    });

    //点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。

//注意红色这里

$("body>*").click(function(event){

      var _con = $('#divTop');   // 设置目标区域

      if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1

        //$('#divTop').slideUp('slow');   //滑动消失

        $('#divTop').hide(1000);          //淡出消失

      }

});

})

这样问题就解决了。

全站搜索

pc端 移动端点击其他地方隐藏div等操作问题

最新推荐

本周排行

pc端移动端点击其他地方隐藏div等操作问题