Javascript KO：在某些情况下，单击事件不触发

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

在书的侧面有一些选项卡，用户可以单击这些选项卡以导航到书的不同区域

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

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

更新：

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

.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;
    }
}

看起来问题在于旋转（标签以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>

CSS（使用较少）：

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

.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;
    }
}

---

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

在一些测试之后，在同一个元素上使用

旋转

和

转换

时，似乎出现了问题，如果我只使用其中一个，那么一切似乎都正常

---

因此，我刚刚删除了CSS转换，而是使用

jQuery.animate（）

模拟效果，goToPage函数定义在哪里？在视图模型的范围内？还是在全球范围内？javascript控制台中有错误吗？@Grim-它是在我的虚拟机中定义的，但正如我所说的，点击事件本身没有触发（也就是说，甚至没有调用函数

selectTab

），因此在哪里定义

goToPage

并不重要。