javascript - 敲: Click event not firing in some situations

Question

我正在开发一个看起来像一本书的 SPA(单页应用程序)。

在书的一侧有标签，用户可以单击这些标签以导航到书的不同区域。

这些选项卡还使用 CSS3 转换对其应用了转换效果。

问题是，有时，当我单击其中一个选项卡时，我看到发生了转换(即选项卡更改颜色并向左移动 20px)但是单击事件没有触发，我需要单击 3-4 次才能它会启动，而在大多数情况下一切正常。

更新:

问题似乎出在旋转上(标签旋转了 90 度)，如果我不旋转它们，一切正常，知道如何克服这个问题吗？

HTML:

<div class="caspBookTabs">
            <ul data-bind="foreach: tabs">
                <li data-bind="text: chapterName, click: $root.selectTab, attr: { 'data-tabName': chapterName }, activeTab: $root.currentTab"></li>
            </ul>
        </div>

JS:

self.selectTab = function(chapter, e){
        goToPage({ chapter: chapter.chapterName });
        e.preventDefault();
        // e.stopPropagation();
    };

CSS(使用 LESS):

.caspBookTabs {
    position: absolute;
    top:85px;
    right:-15px;
    width: 150px;
    height: 100%;
    /* iPads (landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : landscape) {
        top: 75px;
        right:-35px;
    }
    li {
        margin-bottom: 110px;
        height: 33px;
        width: 130px;
        /* iPads (landscape) ----------- */
        @media only screen
        and (min-width : 768px)
        and (max-width : 1024px)
        and (orientation : landscape) {
            margin-bottom: 100px;
        }

        .rotation(90deg);
        display: block;
        background: url('@{caspImgPath}/tabs-i2.png') no-repeat 0 5px;
        text-align: center;
        line-height: 46px;
        /*padding-top: 20px;*/
        color: @tabsColor;
        .font-size(1.4);
        font-weight: bold;
        .transition-property(right);
        position: relative;
        right:0;
        &:hover {
            background-position: 0 -40px;
            cursor: pointer;
        }
        &:active {
            right: 10px;
        }
    }
    .caspActiveTab {
        right: 10px;
        background-position: 0 -40px;
    }
}

Answer 1

找到了一个解决方案，不确定它是否是最好的，但这是我唯一的解决方案，如果您有任何想法，请随时发表其他想法:

经过一些测试，问题似乎出现在对同一元素使用 rotation 和 transition 时，如果我只使用其中一个，一切似乎都有效。

所以我只是删除了 CSS 过渡，而是使用 jQuery.animate() 来模拟效果。