Question

我正在尝试模仿日期选择器的功能，以了解焦点，模糊和点击的工作原理。焦点：当光标位于文本字段时，日期框出现模糊：当光标不在文本字段中时，日期框会消失点击：当用户点击日期框时消失，文本字段中的新值

我正在尝试创建一个类似的概念：焦点：当光标位于文本字段时，将出现带图标的div 模糊：图标将消失单击：单击图标时，将执行某个逻辑代码。

问题：当我尝试点击图标时，首先发生的事件是，所以点击的事件永远不会发生，

这是我的代码：







$(document).ready(function(){

    $(".test").searchHelp();
    $(".test2").searchHelp();
});



    (function($){
        $.fn.extend({
            searchHelp: function(options){


                return this.each(function(){
                    var $this = $(this);
                    var searchIcon = newSearchIcon();
                    var helpTable = newSearchHelpTable();
                    jQuery("body").prepend(searchIcon);
                    jQuery("body").prepend(helpTable);
                    var x = $this.position().left + $this.width();
                    var y = $this.position().top;

                    var once = false;
                    jQuery(searchIcon).css({position:'absolute',left:x,top:y});

                    $this.bind("focus",function(){
                        searchIcon.show();
                    });
                    $this.bind("blur",function(){
                        searchIcon.hide();
                    });
                    /*$(document).bind('mousedown',function(ev){
                        if(ev.target !=  searchIcon){
                            searchIcon.hide();
                        }
                    });*/
                    searchIcon.click(function(){
                        /*helpTable.show();
                        if(!once){
                            jQuery("tr",helpTable).dblclick(function(){
                                $this.val($(this).children("td._key").text());
                                helpTable.hide();
                                searchIcon.hide();
                            });
                            once = true;
                        }*/
                        alert("DO SOMETHING!");
                    });


                });
                function newSearchIcon(){
                    var icon = jQuery('');
                    icon.append("[@]");
                    icon.hide();
                    return icon;
                }
                function newSearchHelpTable(){
                    var helpSHTable = jQuery('');
                    helpSHTable.load("from.htm");
                    helpSHTable.hide();
                    return helpSHTable;
                }

            }
        });
    })(jQuery);



div.searchHelp table tbody tr:hover{
    background:orange;
}
div.searchHelp table tbody tr:active{
    background:red;
}
div.searchHelp table tbody tr td._key{
    background:green;
}

我希望得到你们的帮助，谢谢

Answer 1

如果你改变

searchIcon.click(function(){

到

searchIcon.mousedown(function(){

在输入中失去焦点之前，mousedown会激活。但是，在你的mousedown运行后，这仍然会隐藏图标。如果您不希望图标在单击后消失，请让您的mousedown设置一个标记，然后让您的模糊检查该标记。像这样：

var iconClicked=false;

searchIcon.mousedown(function(){
   ...
   iconClicked=true;
}

$this.bind("blur",function(){
   if(iconClicked){
      iconCLicked=false;
   }else{
      searchIcon.hide();
   }
});

唯一的缺点是，这是在mousedown而不是点击，但根据你想要做的事情，这可能是可以接受的。

编辑：发现这个，第一个建议是一个有趣的建议。 jQuery Blur Fires Before href

Jquery / Javascript datepicker概念插件

1 个答案: