KO：在某些情况下单击事件未触发答案

【问题标题】：KO: Click event not firing in some situationsKO：在某些情况下单击事件未触发
【发布时间】：2013-02-21 20:01:53
【问题描述】：

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

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

选项卡还使用 CSS3 过渡对其应用了过渡效果。

问题是，有时，当我单击其中一个选项卡时，我会看到转换发生（即选项卡更改颜色并向左移动 20 像素）但单击事件未触发，我需要单击 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;
    }
}

【问题讨论】：

goToPage函数定义在哪里？在您的视图模型范围内？还是在全球范围内？你在 javascript 控制台中遇到任何错误吗？
@Grim - 它在我的虚拟机中定义，但就像我说的点击事件本身没有触发（即函数selectTab 甚至没有被调用）所以它在哪里并不重要goToPage 已定义。

标签： javascript html css knockout.js

【解决方案1】：

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

经过一些测试，似乎在同一元素上使用 rotation 和 transition 时会出现问题，如果我只使用其中一个，一切似乎都可以工作。

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

【讨论】：