javascript - JS怎么实现子元素mousedown不触发父元素的click事件-PHP中文网问答

因一个需求需要做父元素做点击事件，子元素有拖动事件，但是现在的父元素的点击事件影响了拖动，我做了一个demo，请问各路大侠们，如何对#idDrag的mouseup放开后不触发#DragContent的点击事件呢。

PS ：鄙人使用了另一个比较笨的方法解决的，#idDrag拖动的时候就注销了#DragContent的click事件，#idDrag拖动结束（mouseup）后再重新绑定#DragContent的click事件。

感谢各位的细心回答，click时间是可以通过stopPropagation()阻止冒泡，但是我的我的用例是如果 $('#idDrag')绑定的是mousedown事件，不想出发父元素的click事件，该如何做到呢？

DEMO CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简易拖放效果</title>
</head>

<body>




<script>

var isIE = (document.all) ? true : false;

var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
    create: function() {
        return function() { this.initialize.apply(this, arguments); }
    }
}

var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
}

var Bind = function(object, fun) {
    return function() {
        return fun.apply(object, arguments);
    }
}

var BindAsEventListener = function(object, fun) {
    return function(event) {
        return fun.call(object, (event || window.event));
    }
}

function addEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, true);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }
};

function removeEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, true);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { 
        oTarget["on" + sEventType] = null;
    }
};

//拖放程序
var SimpleDrag = Class.create();
SimpleDrag.prototype = {
  //拖放对象,触发对象
  initialize: function(drag) {
    this.Drag = $(drag);
    this._x = this._y = 0;
    this._fM = BindAsEventListener(this, this.Move);
    this._fS = Bind(this, this.Stop);
    this.Drag.style.position = "absolute";
    addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));
  },
  //准备拖动
  Start: function(oEvent) {
    console.log("idDrag event", oEvent.target.id);
    oEvent.preventDefault();
    oEvent.stopPropagation();
    this._x = oEvent.clientX - this.Drag.offsetLeft;
    this._y = oEvent.clientY - this.Drag.offsetTop;
    //addEventHandler(document, "mousemove", this._fM);
    //addEventHandler(document, "mouseup", this._fS);
  },
  //拖动
  Move: function(oEvent) {
    this.Drag.style.left = oEvent.clientX - this._x + "px";
    this.Drag.style.top = oEvent.clientY - this._y + "px";
  },
  //停止拖动
  Stop: function() {
    removeEventHandler(document, "mousemove", this._fM);
    removeEventHandler(document, "mouseup", this._fS);
  }
};


</script>





<p id="DragContent" style="width:500px;height:500px; background:#efefef;">
    <p id="idDrag" style="border:5px solid #0000FF; background:#C4E3FD; width:50px; height:50px;"></p>
</p>




<script>
new SimpleDrag("idDrag");
document.getElementById("DragContent").addEventListener("click", function(event){
    console.log("DragContent event", event.target.id);
    event.stopPropagation();
    event.preventDefault();
}, true);

</script>


我想按住拖动元素放开了不触发DragContent的点击事件
</body>
</html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>简易拖放效果</title> <style> #DragContent{ width:500px; height:500px; background:#efefef; position: relative; } #idDrag { position: absolute; top: 0; left: 0; border: 5px solid #0000ff; background: #c4e3fd; width: 50px; height: 50px; } </style> </head> <body> <p id="DragContent"> <p id="idDrag"></p> </p> 我想按住拖动元素放开了不触发DragContent的点击事件 <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script> <script> $(document).ready(function(){ $('#DragContent').bind('click', function(){ console.log('dragcontent'); }); $('#idDrag').bind('click', function(){ console.log('iddrag'); return false; }); }); </script> </body> </html>

全部回复(2)

PHP中文网2017-04-10 15:37:19 2楼

用 jquery 实现了下, 没用拖动事件, 但是逻辑都是一样的, 可以改写成原生的 js , 实现方式就是在绑定 iddrag 事件的时候, 使用 return false 返回, 这样就不会继续像下触发, 所以 dragcontent 就不会被执行