js基础事件请教...

我有个文本框,输入文字的时候文本框下面会有自动完成相似的快捷导航....
重点在这里..我想在文本框的onblur事件里,把快捷导航隐藏掉, 这一步没有问题.
但是又必须要在快捷导航的点击事件里把选中的内容填写到文本框里..这个跟上面的onblur冲突了..
正好先触发文本框的onblur, 然后我的导航click事件无效了...
请问如何避免这个问题啊..
知道的请多多帮助，谢谢了.

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

感谢楼上的,我是在文本框的 onblur事件中写的隐藏快捷菜单...但是我需要在快捷菜单的点击事件里自动填写文本框啊，关键是文本框的onblur在导航菜单的click事件之前就触发了...
<input   type="text" name="txtTypeName" maxlength="8" class="txtCardInfo" id="txtTypeName" style="width: 60px" />

<ul id="ulCardListQuick"></ul>第一:在txtTypeName的keyup事件里，我会自动搜索数据库显示相似内容....
第二:在导航里的li里面点击，我想把他点击的内容自动填写到文本框里.
第三：我想再txtTypeName的blur事件里隐藏掉导航,为什么要这样做呢，因为如果我在文本框里输入了内容，并且导航检索到了内容，如果我不点击导航的内容的话，那么导航一直存在，我需要隐藏它。
如果热心人还有不懂的话，加我QQ：1135110987。
综述：其实问题只有一个，就是txtTypeName的blur事件在ulCardListQuick的Click事件之前触发了!
我如果要他先Click，然后再Blur该怎么做？
思路1：因为这是一瞬间的事，blur时先不要隐藏，而是js调用另一函数，先延迟0.5秒（不够可以继续加哈），再隐藏
导航click事件的时候才隐藏,不需要onblur另外没有文本框没有关键字,或则没有搜索到相关内容的时候也执行隐藏.
to huyidao21:你说的功能我都做到了,但是有个问题，我搜索到内容，但是我不选择，我去点击其他的时候，导航不会隐藏掉  谢谢你终于看懂了我的问题！
to q107770540: 当你点击导航事件的之前，你已经触发onblur了，所以你的说法不成立。
呵呵刚才给你提了个思路延迟0.5秒就是给导航 click 时间，
1、导航click事件就隐藏；
2、0.5秒后，如果导航没有click ，就认为焦点到其他地方了，也隐藏导航。
   貌似很有点搞人啊
  就算了延迟onblur 也不行呃....
     暂时没法子
to lovesheng1212: 感谢你去尝试了！对于还是js新手的我，我无言以对！我愧对众生！
思路2：
导航上有 "鼠标在上面移动" 的事件吗？如果有就触发下，告诉"全局变量"鼠标在我头上，"鼠标走了后"，告诉"全局变量"鼠标走了；
文本框onblur时，问"全局变量"，鼠标在导航头上吗？
if 在：不隐藏导航
else ：隐藏
设置区域DIV，导航放到里面去。
鼠标在DIV区域时导航为可见。看看行不行，我不熟JS
崇拜下 lovesheng1212把自己想的变成code
对我来说得，上网查各种函数+调试n次大约一个下午的时间少壮不努力，老大徒伤悲啊现在用以致学了
to Lvqw0122:此计绝对可行!!!  我也有想过，不过我想得到的答案是阻止冒泡，或者事件的一些先后性来处理...我之前已经用过此方法做过了，一直以为这个方法太不灵活了.
to zjc411:你这个更不灵活了...能够介意我不采用吗？我讨厌js全局变量.
文本框里面用onchange事件来动态触发导航菜单！！！！！！
谢谢w276080872的支持！作为新菜鸟！我可以提供n种方案，但绝对都不是最优的。我抱着学习的态度来 Mark 本帖！
我的意思是不需要用onblur来实现隐藏
直接去除掉onblur 事件
onblur事件里隐藏导航菜单！！
to foren_whb:onchange事件不是即时触发的，或者我可以反驳你的观点吗？
  onchange方法根本不能做自动完成这个功能.
to zjc411:大家都是菜鸟，共勉之！
我们项目里面都是通过onchange事件，
调用ajax方法动态显示提示信息，
你输入的文字越多，
提示的信息就越精确。
to w276080872 思路3：你的想法跟 My97DatePicker 这个时间控件的功能一样，导航用js生成可行吗？
to foren_whb: onchange事件是需要点击的(我个人观点以及个人测试得到的结论),
然后我放弃onchange 用 onkeyup, 当然那个Ie的专用onpropertychange是可以的..
我想问onchange为什么我测试不能即时获得呢、
补充：不是生成，而是直接向 My97DatePicker 一样，华丽的出现。
to foren_whb:问题的关键在于...如何在其他地方点时隐藏导航，而在导航上点击后才隐藏。
思路4：文本框 onkeydown 时一定出现导航吧文本框 onblur 时，导航不隐藏，而是导航捕获焦点；
导航只有在导航click ，或者导航失去焦点时隐藏。
试试合用不
<html>
<head>
</head>
<body>
    <input id="text1" type="text" onblur="textBlur()" /><br />
    <a href="#" id="a1" onclick="aclick()">go to msdn</a>
</body>
</html><script>
var a1=document.getElementById("a1");
var text1=document.getElementById("text1");
text1.onblur=function()
{
    setTimeout(textBlur,500);
}
function textBlur()
{
    a1.style.display="none";
    alert("text1 onblur");
}
function aclick()
{
    alert("a1 click");
}
</script>
to zjc411:ul 不可以onfocus
to jagland:我先看看你的代码。
  感谢关注的，我正在工作，所以回复不是很及时，但是你们要相信，我的内心无时无刻不在感激你们。
lovesheng1212 还说思路1 不可行
不会超过0.5秒的 mousedown 的时候文本框才会onblur 吧，就是一瞬间的事
jagland 的代码做如下改动 <a href="#" id="a1" onclick="aclick()">go to msdn</a>改为 <a href="#" id="a1" onfocus="aclick()">go to msdn</a>就不会出现鼠标点了 0.5 秒不放的事情了
刚学jQuery的时候，我看百度的搜索功能蛮好玩的，就照着写了个小脚本，貌似和你说的情况有点类似。我用的方法是取消有冲突的事件绑定，等另一事件执行完后在绑回去
在鼠标移动到导航菜单上的时候，让文本框的onblur事件无效！！
一个逻辑思维清晰严密的人，
思考问题就会明确逻辑边界问题，
并充分避免交集出现。
文本框    onkeyup事件        弹出导航菜单
文本框    onblur事件         隐藏导航菜单(延迟一小会)
导航菜单  onmouseover事件   文本框onblur事件失效
导航菜单  onclick事件        最终结果，隐藏导航菜单，文本框onblur事件恢复
导航菜单  onMouseOut事件    隐藏导航菜单，文本框onblur事件恢复
看看还有漏掉什么没有
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    <script src="JS/jquery-1.4.min.js" type="text/javascript"></script>    <style type="text/css">
        .menu
        {
            float: left;
            overflow: hidden;
            width: 110px;
            height: auto;
            border: 1px solid #455765;
        }
        .menu ul
        {
            float: left;
            margin: 0px;
            padding: 0px;
        }
        .menu ul li
        {
            list-style-type: none;
            margin: 2px auto;
            width: 110px;
            height: 30px;
        }
        .menu ul li a
        {
            display: block;
            color: Black;
            font-size: 12px;
            width: 100%;
            height: 22px;
            line-height: 22px;
            text-decoration: none;
            text-align: center;
        }
        .menu ul li a:hover
        {
            background-color: #EAF9FF;
            /*border: 3px double #455765;*/
            text-decoration: none;
        }
    </style>    <script type="text/javascript">
        var clearSuggestionsTimer = false;
        $(document).ready(function() {
            $("#inputValue").bind("keyup", function() {
                lookfor();
            });
            $(".menu").bind("mouseover", function() {
                clearTimeout(clearSuggestionsTimer);
                $("#inputValue").unbind("blur");
            }).bind("mouseout", function() {
                restTimeOut();
            });
            $(".menu ul li a").click(function() {
                $("#inputValue").val($(this).html());
                $(".menu").hide();
            });
        });        function lookfor() {
            $(".menu").css({ "position": "absolute", "display": "block", "left": $("#inputValue").offset().left, "top": $("#inputValue").offset().top + $("#inputValue").height() + 10 });
            $("#inputValue").bind("blur", function() {
                restTimeOut();
            });
        }        function restTimeOut() {
            clearTimeout(clearSuggestionsTimer);
            clearSuggestionsTimer = setTimeout(function() { $(".menu").hide(); }, 500);
        }
    </script></head>
<body>
    <form id="form1" runat="server">
    <input type="text" id="inputValue" />
    <div class="menu" style="display: none;">
        <ul>
            <li><a href="#">图书借阅信息</a></li>
            <li><a href="#">图书参考信息</a></li>
            <li><a href="#">图书申请信息</a></li>
            <li><a href="#">借书</a></li>
            <li><a href="#">还书</a></li>
        </ul>
    </div>
    </form>
</body>
</html>
用我的菜鸟水平写了个，思路上是一样的，改改，规范下，可以用，提示要吧生存，这个是例子就直接固定下来了