角指令不適用於子元素

Question

我有一個指令，我想添加到div而不是其子div。 我希望一個div是可拖動的，以便該div是可拖動的，並且其子div也隨之拖動。 但我不希望孩子的div能夠拖動其父div。

這是HTML模板

<div div-draggable id="chColorPickerWrapper">
    <div>
        <div id="colorDiv"> </div>    
        <div id="whiteToTransparent"> </div>
        <div id="blackToTransparent"> </div>
    </div>
</div>

這是指令

chDirectives.directive('divDraggable',['$document', function($document){
    return{
        restrict: 'A',
        link : link
    };

    function link(scope,element,attrs)
    {
        var startX = 0;
        var startY = 0;
        var x = 0;
        var y = 0;

        var mouseMove = function(event) {
            event.preventDefault();
            y = event.pageY - startY;
            x = event.pageX - startX;

            element.css({
                top: y + 'px',
                left:  x + 'px'
            });
        }

        var mouseUp = function() {
            console.log('UNBIND');
            $document.off('mousemove', mouseMove);
            $document.off('mouseup', mouseUp);
        }

        var mouseDown = function(event){
            console.log('mouseDown');
            event.preventDefault();
            startX = event.pageX - x;
            startY = event.pageY - y;
            $document.on('mousemove', mouseMove);
            $document.on('mouseup', mouseUp);
        }


        element.bind('mousedown',mouseDown);
        element.css({
            position: 'relative',
            cursor: 'pointer',
            display: 'block',
        });        
    }
}]);

當我單擊colorDiv時，我不希望它可拖動。 如何覆蓋或刪除子div的這種行為？

如果您有任何改善我的代碼的建議，我也將不勝感激，因為我對angularjs相當陌生

編輯：這是一個示例： http : //plnkr.co/edit/K52DDXQRCME7S3oMimoC

Answer 1

在mouseDown處理程序中，您需要檢查event.target是否為該可拖動元素：

   var mouseDown = function(event){
            console.log('mouseDown');
            event.preventDefault();
            if( event.target === element ) {
              startX = event.pageX - x;
              startY = event.pageY - y;
              $document.on('mousemove', mouseMove);
              $document.on('mouseup', mouseUp);
            }
        }