javascript - HTML onClick 不适用于 Windows Phone

Question

我有一个 web 应用程序可以在模拟器、android 和 ios 上正常工作，但在 Windows Phone 上，一个 onclick 事件不起作用。这是我的 HTML 代码:

   <ul id ="triggerresolutionbg" class="table-view">
        <li class="table-view-cell media">
        <element>
            <button class="btn btn-link btn-nav pull-left">
                <span class="icon icon-left-nav" id ="triggerLeft" onClick = "triggerText(this.id)" ></span>
            </button>
            </element>

            <button class="btn btn-link btn-nav pull-right">
                <span class="icon icon-right-nav" id ="triggerRight" onClick = "triggerText(this.id)"></span>
            </button>
            <element>
                <center id ="triggerText">After I...</center>
            </element>
        </li>
    </ul>

我正在使用 Ratchet、Bootstrap 和 JQuery。

为什么 Windows Phone 上的 onclick 方法不起作用？

Answer 1

根据HTML5 spec for button将交互式内容放在按钮元素内是无效的。

Content model:

Phrasing content, but there must be no interactive content descendant.

因此，您不应期望事件监听器作用于按钮内的元素。有些浏览器违反规范并允许这样做，但其他浏览器则不允许。尝试将 onclick 处理程序附加到 button 元素本身。

由于您使用的是 this.id，我建议在此过程中重构您的 HTML，但像这样的方法应该可行。

<button class="btn btn-link btn-nav pull-left" onclick="triggerText(this.firstElementChild.id)">
    <span class="icon icon-left-nav" id="triggerLeft"></span>
</button>