Angular 指令不适用于 child 元素

Question

我有一个指令，我想添加到 div 但不添加到它的 child div。我想要一个 div 是可拖动的，以便这个 div 是可拖动的，它的 child divs 也被拖动。但我不希望 child div 能够拖动它的 parent 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 时，我不希望它是可拖动的。我如何覆盖或删除 child 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);
            }
        }

Angular 指令不适用于 child 元素

Angular Directive not for child element

html

javascript

angularjs

angularjs-directive