通过jQuery在文本输入字段中选择文本会导致其他元素需要双击而不是单击才能触发吗？

Question

我有一个jquery函数，所以每当<input type="text">元素进入焦点时，其中的所有文本都会被选中。

$('input[type=text]').focusin(function(e) {
    // Selects all text on text field focus
    $(this).select();

});

到现在为止还好。在页面的其他地方是一个复选框，通过一些花哨的CSS伪装成切换开关，使用顶层css库。下面是切换开关的外观：

http://topcoat.io/switch/

当我单击或切换到文本框时，所有文本都会像预期的那样被选中。但是，如果我点击切换开关，它就不会启动。我必须双击才能使其工作。它应该只需要一次点击。如果我在文本框之外的页面背景上单击，切换开关将恢复为只需单击一次。如果我重新加载页面，并且不单击任何文本框，切换开关将正常工作，只需单击一次即可。奇怪的是，如果我从jQuery函数中删除$(this).select();行，切换开关就会再次正常工作。

这是HTML的结构：

<div class="section-wrapper">

    <div class="section">
        <div class="trough">
            <label class="topcoat-switch">
                <input type="checkbox" class="topcoat-switch__input">
                <div class="topcoat-switch__toggle"></div>
            </label>
        </div>
    </div>

    <div class="section-contents">
        <!-- Input text fields are in here, buried in some more divs -->
    </div>

</div>

为了深入挖掘，我编写了一个小函数来跟踪哪些元素注册了一次点击。

$('div, input').on('click', function(e) {
    console.dir(e.currentTarget);
})

当按预期工作时，在聚焦于任何文本框之前，单击切换开关时鼠标单击传播看起来是这样的：

input.topcoat-switch__input
div.trough
div.section
div.section-wrapper
div.container-inner
div.container

需要注册点击的关键元素是输入元素：input.topcoat-switch__input

正如预期的那样，鼠标单击注册在最深的元素中，并向外传播。但是，在我单击一个文本框，然后单击切换开关后，鼠标传播堆栈如下所示：

div.topcoat-switch__toggle
div.trough
div.section
div.section-wrapper
div.container-inner
div.container

input元素无处可见，需要双击才能注册。似乎div.topcoat-switch__toggle元素(输入的兄弟元素)正在注册，而不是输入注册。

我该怎么做才能让我在专注于文本输入时保留选择所有文本的功能，并修复奇怪的鼠标单击注册行为？

Answer 1

正如Anthony McGrath所指出的，问题在于文本选择输入干扰了用于切换开关工作的CSS样式。topcoat.io切换开关样式依赖于input: focus、input:active和input:checked选择器才能正常工作，而对文本的选择会干扰这些选择器。

我通过向每个文本框的focusOut事件添加一个clearSelection()函数解决了这个问题。我使用的清除选择功能是由Tim Down提供的：

https://stackoverflow.com/a/14788286/2450280