javascript - angularjs鼠标事件 - 如何在angularjs中添加拖动元素的延迟?




hover hoverintent (5)

window.setTimeout在指定的延迟后调用一个函数或者执行一段代码。

$scope.hideIt = function () {
    window.setTimeout(function() {
        $scope.hovering = false;
        $scope.$apply();
    }, 500);  // 500ms delay        
};

或者Angular $timeout服务:

$scope.hideIt = function () {
    $timeout(function() {
        $scope.hovering = false;
    }, 500);  // 500ms delay        
};

https://code.i-harness.com

我有一个元素:

    <span ng-mouseenter="showIt()" ng-mouseleave="hideIt()">Hover Me</span>
    <div class="outerDiv" ng-show="hovering">
        <p>Some content</p>
        <div class="innerDiv">
            <p>More Content</p>
        </div>
    </div>

这是JS:

// mouseenter event
$scope.showIt = function () {
    $scope.hovering = true;
};

// mouseleave event
$scope.hideIt = function () {
    $scope.hovering = false;
};

我希望能够在悬停事件上设置500毫秒的延迟。

我已经有了这个问题的答案,但我不能再发布8个小时。 我会回来的!


你好有上面的好回答只是想添加不要忘记取消你的计时器,如果你需要悬停时,它仍然没有开火或当你销毁指令

 $timeout.cancel( timer );
 $scope.$on("$destroy",
                    function( event ) {

                        $timeout.cancel( timer );

                    }
                );

就像这里已经提到的大多数,我给mouseenter事件添加了一个计时器。

// create the timer variable
var timer;

// mouseenter event
$scope.showIt = function () {
    timer = $timeout(function () {
        $scope.hovering = true;
    }, 500);
};

我遇到的问题是,如果我滚动过去的项目,鼠标光标击中,弹出窗口仍然会发生在半秒钟之后。 我希望能够滚动通过一个项目,而不会意外弹出。

把超时放在一个变量允许我取消超时。 我在鼠标离开事件,以确保用户不会意外触发弹出窗口。

// mouseleave event
$scope.hideIt = function () {
    $timeout.cancel(timer);
    $scope.hovering = false;
};

这里是一个小提琴,以防任何人想看到它在行动: jsfiddle


感谢您提出这个问题,因为这个例子帮助我理解了$ timeout如何比AngularJS的文档做得更好。 不过,我在正确的答案上略微改进了操作,并希望在此分享。

你永远不需要创建一个空的var叫做timer。 实际上,这样做是在使用你不需要的内存。 你有一个变量和两个函数来处理实际上是一个单一的操作。

所以,我所做的是创建一个名为'toggleHover'的函数,它接受一个名为'bool'的布尔参数。 然后一个if / else语句决定你需要运行哪个$ timeout函数。

AngularJS In Controller

$scope.hovering = false; //Sets the initial state of hover

$scope.toggleHover = function (bool) {
    if (bool === true) {
        $timeout(function () {
            $scope.hovering = !$scope.hovering;
        }, 500);
    } else {
        $timeout(function() {
            $scope.hovering = !$scope.hovering;
        }, 500);
    };
}

HTML / VIEW

<span ng-mouseenter="toggleHover(true)" ng-mouseleave="toggleHover(false)">Hover Me</span>

http://jsfiddle.net/89RTg/12/


我建议使用CSS转换和角动画:

JS

var app = angular.module('app', ['ngAnimate']);

CSS

.outerDiv.ng-hide-remove {
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all;
    transition-delay: 0.5s;
    opacity: 0;
}
.outerDiv.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

HTML

<span ng-mouseenter="hovering=true" ng-mouseleave="hovering=false">Hover Me</span>
<div class="outerDiv" ng-show="hovering">
    <p>Some content</p>
    <div class="innerDiv">
        <p>More Content</p>
    </div>
</div>

演示Plunker





hoverintent