Javascript 单击前执行模糊_Javascript_Jquery_Events

Javascript 单击前执行模糊

javascript jquery events

Javascript 单击前执行模糊,javascript,jquery,events,Javascript,Jquery,Events,我有两个事件：1）模糊和单击。如果用户将输入元素留空，模糊事件将删除所有内容，单击事件将显示一个对话框 $(document).on('click','.glyphicon-filter',glyphiconFilterClicked); function glyphiconFilterClicked() { debugger; // show dialog box goes here } $(document).on('blur','input',filterBlurred); fu

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

$(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”，我怎么能说“在输入模糊时，不要清空父th元素”？

我不太理解这个问题，但我得到的是，如果用户模糊了除class=“glyphicon filter”之外的输入，不要清空元素，对吗？如果是这样的话，只需按照以下步骤进行：

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

您将无法连接这两个事件。您可以在模糊事件处理程序中使用setTimeout（…）等待，例如100毫秒。然后在单击处理程序中，将标志设置为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>


滤镜模糊演示
苹果
过滤器。。。
（默认值）
橘子
过滤器。。。
（自定义超时）
香蕉
（自定义过滤器图标选择器）

桃子
（除了厨房的水槽外，所有的东西）

函数过滤器模糊（事件）{
//控制台信息（“模糊”）；
变量输入=event.target，
filterIconSelector=input.getAttribute（“数据过滤器图标选择器”）| |“.glyphicon过滤器”，
containerSelector=input.getAttribute（“数据过滤器图标容器”）||“tr”，
clearedOutSelector=input.getAttribute（“数据过滤器清除选择器”）||“th”，
clearedOutValue=input.getAttribute（“数据过滤器清除值”）| |“”，
timeout=Number（input.getAttribute（“数据过滤器超时”）| | 250，
$row=$（输入）。最近的（容器选择器），
$icon=$row.find（filterIconSelector），
clearInput=函数（）{
如果（！input.value）{
如果（$icon.attr（“单击数据过滤器图标”）！==“是”）{
$row.find（clearedOutSelector）.html（clearedOutValue）；
}
$icon.attr（“单击的数据过滤器图标”）；
}
};
setTimeout（clearInput，isNaN（超时）？250：超时）；
}
函数GlyphiConfigFilterClicked（事件）{
event.target.setAttribute（“单击数据过滤器图标”、“是”）；
//控制台信息（“点击”，事件目标）；
event.preventDefault（）；
//做其他事情
}
$（文件）
.on（“模糊”，“输入”，过滤器模糊）
.on（“单击“，”.glyphicon过滤器”，glyphiconfilter已单击）；

你应该能够复制并粘贴到一个HTML文件中，保存它，然后加载到浏览器中

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

你说的“删除所有内容”是什么意思？这是表单重置吗？该行中的所有th元素都会被清除，方法是用一个不间断的空格替换其中的html。嗯。我可以将该标志称为我想我要做的是设置一个$.Deferred（）变量，如果单击了过滤器图标，那么我将解析它。否则，我将等待100毫秒，并假设过滤器图标未被单击。