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()来模仿效果。

KO：点击事件在某些情况下不会触发

1 个答案: