阻止table行监听事件

提问 已结 8 285
一秒暴富
悬赏:20飞吻
版本:layui 浏览器:

我点击表格某一行 会出现这个粉色div,我点击粉色div中的关闭按钮时,会触发table行监听时间,导致不断重复添加粉色div,有大神指教吗?
我想在粉色div中的所有操作都不会被行监听影响,但是我也需要行监听事件
回帖
  • IDyun
    2019-4-10
    <script type="text/html" id="testDiv">
    <div class="table_handle" style=" position: relative;">测试</div>
    </script>
       var $= layui.$;
    //监听行单击事件(单击事件为:rowDouble)
    table.on('row(test)', function(obj) {
    var data = obj.data;
    if (obj.tr.find('.table_handle').length) {
    obj.tr.find('.table_handle').remove();
    } else {
    obj.tr.eq(0).append($('#testDiv').html()).find('.table_handle').click(table_handleClick())
    }
    //移除其他行的元素
    obj.tr.siblings().find('.table_handle').remove();
    });

    function table_handleClick(){

    return false;//相当于e.stopPropagation(); e.preventDefault();
    }
    0 回复
  • IDyun
    2019-4-9
    图重复了。
    0 回复
  • @IDyun 重新改了
    0 回复
  • IDyun
    2019-4-10
     //监听行单击事件(单击事件为:rowDouble)
    table.on('row(test)', function(obj) {
    var data = obj.data;
    if (obj.tr.find('.table_handle').length) {
    obj.tr.find('.table_handle').remove();
    } else {
    obj.tr.eq(0).append('<div class="table_handle" style=" position: absolute; left:90px; top: 80px;">测试</div>').find('.table_handle').click(function(e) {
    return false;//相当于e.stopPropagation(); e.preventDefault();
    });
    }
    });
    0 回复
  • @IDyun 有个bug 比如你点击第一行,粉色div出现,然后你再点击第二行,再点击任何一行,粉色div都不会消失[思考]
    0 回复
  • @IDyun 你可以帮我看下 怎么让那个粉色div从点击的那一行从上往下移动出现的效果吗 我设置的css样式,top值发生变化,但是没有动画效果[可怜]

    0 回复
  • 0 回复
  • IDyun
    2019-4-10
    http://www.w3school.com.cn/cssref/pr_animation.asp

    .table_handle {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;

    /* 动画往下移动,并让动画停留在最后一帧 */
    animation: rotateScale 3s;
    -moz-animation: mymove 3s; /* Firefox */
    -webkit-animation: mymove 3s; /* Safari and Chrome */
    -o-animation: mymove 3s; /* Opera */
    animation-iteration-count: 1; /*动画只执行一次*/
    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-fill-mode: forwards; /*让动画停留在最后一帧 */
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    }

    @keyframes mymove
    {
    from {top:0px;}
    to {top:200px;}
    }
    </style>
    0 回复