AngularJS ScrollTop on Click 指令。如何阻止内部点击触发外部指令点击。

Question

我构建了一个指令，用于在延迟后将部分滚动到视图中，以补偿部分动画打开，然后添加功能以在用户尝试手动滚动屏幕时停止滚动。

angular.module("scrollOnClick", [])
.directive('scrollOnClick', function() {
    return {
        restrict: 'A',
        link: function(scope, $elm, $window) {
            $elm.on('click', function() {
                var $viewport = $('html, body');

                $viewport.bind("scroll mousedown DOMMouseScroll mousewheel keydown", function(){
                     $viewport.stop()
                });     

        setTimeout(function () {   
            var winH = window.innerHeight
            var oSet = (winH / 2) - 222
            $viewport.animate({scrollTop: $elm.offset().top - oSet}, "easing", function(){
                $viewport.unbind("scroll mousedown DOMMouseScroll mousewheel keydown");
            }); return false;
        }, 201);
      });
   }
  }
});

我的问题是我不想让它触发 scrollTop 动画的部分中有一个按钮。任何想法是如何阻止它？

Answer 1

试试：

$elm.on('click', function(event) {
   if (event.target == this){ //run code only when the clicked target is the current element.
    //your code

   }
}

另一种解决方案是添加此代码：

$elm.find("button").on('click',function(event){
   return false;//prevent default and stop propagation.
   //or event.stopPropagation();
});

//your code 
$elm.on('click', function() {

要将.find 与选择器一起使用，您可能需要包含jQuery