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

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

1 个答案: