Question

我有两个事件：1）模糊和点击。如果用户将输入元素留空，则blur事件将删除所有内容，click事件将显示一个对话框。

$(document).on('click','.glyphicon-filter',glyphiconFilterClicked);
function glyphiconFilterClicked() {
    debugger; // show dialog box goes here
}

$(document).on('blur','input',filterBlurred);
function filterBlurred() {
    if ($(this).val() === '') {
        $(this).closest('tr').find('th').html('&nbsp;');
    }
}

问：我怎么说“输入模糊，如果原因是因为用户刚刚点击了class =”glyphicon-filter“，请不要清空父元素？

Answer 1

我不太了解这个问题，但是我得到的是，如果用户模糊输入而不是具有class =“glyphicon-filter”的输入，请不要清空该元素吗？如果是这样，请按以下方式进行：

$(document).on('blur','input.glyphicon-filter',filterBlurred);
function filterBlurred() {
    if ($(this).val() === '') {
        $(this).closest('tr').find('th').html('&nbsp;');
    }
}

Answer 2

您将无法连接这两个事件。你可以在模糊事件处理程序中使用setTimeout（...）来等待，比如100毫秒。然后在click处理程序中将一个标志设置为true，以便在擦除表单字段的值之前setTimeout中的回调将检查。

编辑：我认为的一些工作代码按您的意图运作...

<!DOCTYPE HTML>
<html>
<head>
    <title>Filter Blur Demo</title>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <th>Apples</th>
                <td><input type="text"> <button class="glyphicon-filter">Filter...</button>
                    (defaults)</td>
            </tr>
            <tr>
                <th>Oranges</th>
                <td><input type="text" data-filter-icon-timeout="2000"> <button class="glyphicon-filter">Filter...</button>
                    (custom timeout)</td>
            </tr>
            <tr>
                <th>Bananas</th>
                <td><input type="text" data-filter-icon-selector="a"> <a href="#" class="glyphicon-filter">Filter...</a>
                    (custom filter icon selector)</td>
            </tr>
        </tbody>
    </table>
    <ol>
        <li>
            <label>Peaches</label>
            <input type="text"
                data-filter-icon-container="li"
                data-filter-icon-timeout="250"
                data-filter-icon-selector="a"
                data-filter-cleared-out-selector="label"
                data-filter-cleared-out-value="n/a">
            <a href="#" class="glyphicon-filter">Filter...</a>
            (everything but the kitchen sink)
        </li>
    </ol>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        function filterBlurred(event) {
            //console.info("blur");
            var input = event.target,
                filterIconSelector = input.getAttribute("data-filter-icon-selector") || ".glyphicon-filter",
                containerSelector  = input.getAttribute("data-filter-icon-container") || "tr",
                clearedOutSelector = input.getAttribute("data-filter-cleared-out-selector") || "th",
                clearedOutValue    = input.getAttribute("data-filter-cleared-out-value") || "&nbsp;",
                timeout            = Number(input.getAttribute("data-filter-timeout")) || 250,
                $row               = $(input).closest(containerSelector),
                $icon              = $row.find(filterIconSelector),
                clearInput = function() {
                    if (!input.value) {
                        if ($icon.attr("data-filter-icon-clicked") !== "yes") {
                            $row.find(clearedOutSelector).html(clearedOutValue);
                        }

                        $icon.attr("data-filter-icon-clicked", "");
                    }
                };

            setTimeout(clearInput, isNaN(timeout) ? 250 : timeout);
        }

        function glyphiconFilterClicked(event) {
            event.target.setAttribute("data-filter-icon-clicked", "yes");
            //console.info("click", event.target);
            event.preventDefault();
            // do other stuff
        }

        $(document)
            .on("blur", "input", filterBlurred)
            .on("click", ".glyphicon-filter", glyphiconFilterClicked);

    </script>
</body>
</html>

您应该能够复制并粘贴到HTML文件中，保存，然后将其加载到浏览器中。它在Firefox中适用于我。

在这种情况下，“flag”是图标元素上的HTML5 data- *属性。这使得事物非常可定制和可重复使用。

点击前模糊执行

2 个答案: