Question

我的Angular应用中遇到了一个奇怪的问题。

在侧边栏中，我有一些带代码的标签，用于显示悬停并隐藏悬停。它需要用户在悬停显示之前坐在标签上2秒，如果用户在2秒之前离开，gsub('[a-zA-Z, ]', '', string)将连接sp_addserver功能并将其终止。所以效果很好。

然而在另一个指令中没有发生这种情况，我基本上/ 90％具有完全相同的代码，但$timeout.cancel完全被忽略，因此只要将鼠标悬停在另一个指令中的标记上，无论如何，悬停都会发射。

工作代码（tagsPanel Directive）

mouseleave

工作标记

$timeout.cancel

不工作代码（viewHeader指令）

function hoverTag(tag) {
    vs.hoverTimeout = $timeout(function() {
        ApiFactory.getTagDataSilm(tag.term_id).then(function(data) {
            console.log('getTagDataSilm: ', data.data.ticker_tag);
            tag.tickers = data.data.ticker_tag.tickers;
            tag.tagsHoverDisplay = true; 
        });
    }, 2000);
}

function leaveTag(tag) {
    $timeout.cancel(vs.hoverTimeout);
    tag.tagsHoverDisplay = false;
}

不工作标记（尽管有mouseleave功能，超时仍会触发）

<li ng-repeat="t in tags" ng-class="{'selected': t.selected}">
    <div class="tag-container-container">
        <div class="tag-container"
             ng-class="{'width-auto': widthAuto}"
             ng-mouseleave="leaveTag(t)">
            <div class="tag"
                 ng-click="selectTag(t)"
                 ng-mouseover="hoverTag(t)"
                 ng-class="{'positive': t.direction == 'positive',
                            'negative': t.direction == 'negative',
                            ''        : t.direction == 'stagnant'}">
                            {{t.term}}
            </div>
            <tags-hover tag="t"></tags-hover>
        </div>
    </div>
</li>

附加功能

这是function hoverViewTag(ticker, tag) { console.log('hoverViewTag ', tag); vs.hoverViewTimeout = $timeout(function() { ApiFactory.getTagData(ticker, tag.term_id).then(function(data) { var timeSpan = TimeSpanFactory.getTimeSpan(); var period = createSortString(timeSpan.when); var singleTagArray = []; singleTagArray.push(data.data.ticker_tag); var tagDetails = TagFactory.renderDirections(singleTagArray, null, period); tag.tagsHoverDisplay = true; tag.favorite = tagDetails[0].favorite; tag.quantity = tagDetails[0].quantity; tag.tickers = tagDetails[0].tickers; tag.tweet_percentage = tagDetails[0].tweet_percentage; tag.momentum_twitter_preview = tagDetails[0].momentum_twitter_preview; }); }, 2000); } function leaveViewTag(tag) { // Cancel damn it! $timeout.cancel(vs.hoverViewTimeout); tag.tagsHoverDisplay = false; }在tagsPanel范围内的样子：

enter image description here

这就是<ul class="view-tags-ul" ng-repeat="obj in vh.viewTickerTags"> <li ng-repeat="t in obj.tags track by $index"> <div class="tag-container" ng-mouseleave="vh.leaveViewTag(t)"> <div class="tag" ng-click="vh.removeTag(obj.ticker, t)" ng-mouseover="vh.hoverViewTag(obj.ticker, t)" ng-class="{'positive': t.direction == 'positive', 'negative': t.direction == 'negative', '' : t.direction == 'stagnant'}">{{t.term}} <div class="close-x-sml"></div> </div> <tags-hover tag="t"></tags-hover> </div> </li> </ul>对象的样子：

enter image description here

tags

的CSS

vh.viewTickerTags

.tag范围内的.tag { text-align: left; border: 1px solid $gray_light; background: $gray_bg; &:hover { -webkit-transition : border 2000ms ease-out; -moz-transition : border 2000ms ease-out; -o-transition : border 2000ms ease-out; border: 1px solid $gray4 !important; background: #fff !important; } &.positive, &.negative { border: 1px solid $gray2; } &.positive:after { position: absolute; top: -10px; right: 0; @include triangle(left, 10px, $green); } &.negative:after { position: absolute; right: -10px; bottom: 0; @include triangle(up, 10px, $red); } &.blue1 { @include colored-tag($blue1) } &.blue2 { @include colored-tag($blue2) } &.blue3 { @include colored-tag($blue3) } } li.selected { .tag { font-family: 'robotoregular'; border: 1px solid $gray4; } }的CSS

.tag

Answer 1

在你的第二个（非工作）示例中，div有子项，并且由于您使用 mouseover ，每次将鼠标悬停在该div的子项上时，事件处理程序都会运行。

要解决此问题，只需将ng-mouseover替换为ng-mouseenter，其与 mouseover 不同，因为它会在您输入div时触发，但不会在您将鼠标悬停在一个div上时触发它的孩子们。它与 mouseleave 相反。 mouseover 的反面是 mouseout 。

为什么我的$ timeout.cancel在这里工作，但不在这里？

1 个答案: