拖动一个元素时阻止子元素响应点击效果 - WEB前端(UI)

已结贴√ 问题点数：100 回复次数：4

拖动一个元素时阻止子元素响应点击效果

想实现一个效果应该怎么处理呢？
<li><a href="http://www.baidu.com"></a></li>
这里定义了li的拖动事件，执行li的拖动事件后居然触发了a标签的点击事件，有什么方式能解决这个问题呢？阻止冒泡也不行。
我想要的效果是：拖动li就执行li的拖动事件，点击时才触发a标签的点击效果跳转到指定的链接中。
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0; }
a{ display:block;}
div{ width:800px;}
ul{ list-style-type:none; width:800px;}
ul li{ width:800px;}
ul li img{ width:100%;}
</style>
</head>

<body>
<div id="slide">
    <ul>
        <li>
            <a href="http://www.baidu.com">
                <img src="images/01.jpg"/>
            </a>
        </li>
    </ul>
</div>
<p id="xinxi"></p>
</body>
<script type="text/javascript">
var mousedown=false;
var point={};
var move={};
$("#slide").bind({
    mousedown:function (event) {
        event.stopPropagation();
        $("#xinxi").html("");
        mousedown=true;
        point.x = event.pageX;
        move.x=0;
    },
    mousemove:function(event){
        event.preventDefault();
        event.stopPropagation();
        if(mousedown){
            move.x=event.pageX;
        }
    },
    mouseup:function(event){
        event.stopPropagation();
        if(mousedown)
        {
            mousedown=false;
            //如果移动的长度超过50px;就处理。
            var zhi=move.x-point.x;
            if(Math.abs(zhi)>50&&move.x>0)
            {
                if(zhi>0)
                    $("#xinxi").html("向右滑动");
                else $("#xinxi").html("向左滑动");
            }
        }
    }
});
</script>
</html>

搜索更多相关主题的帖子: PUBLIC　元素　标签　

第 2 楼

得分:100

标红部分是新加的代码，其余部分一样。

var mousedown=false;
var point={};
var move={};

var a = $('a');
var flag = 0;

$("#slide").bind({
    mousedown:function (event) {
        flag = 0;

        event.stopPropagation();
        $("#xinxi").html("");
        mousedown=true;
        point.x = event.pageX;
        move.x=0;
    },
    mousemove:function(event){
        flag = 1;

        event.preventDefault();
        event.stopPropagation();
        if(mousedown){
            move.x=event.pageX;
        }
    },
    mouseup:function(event){
        event.stopPropagation();
        if(mousedown)
        {
            mousedown=false;

            if(flag === 0) {
              a.unbind();
            } else if(flag === 1) {
              a.bind('click',function() {
                  return false;
              });
            }

            //如果移动的长度超过50px;就处理。
            var zhi=move.x-point.x;
            if(Math.abs(zhi)>50&&move.x>0)
            {
                if(zhi>0)
                    $("#xinxi").html("向右滑动");
                else $("#xinxi").html("向左滑动");
            }
        }
    }
});

[此贴子已经被作者于2016-5-25 21:59编辑过]