event.target/srcElement一点应用

今天工作遇到一个问题，在朋友帮助下解决了，写下来跟大家分享下。

首先说下需求，有一个文本框，文本框下面有个隐藏的div，div中有几个a标签，当点击文本框时候，div显示出来，点击div中的a标签，会将a标签的值赋到文本框中。点击其他地方时候则隐藏div。

如图   点击文本框，下面div显示

点击a标签时候 a标签值赋到文本框中

当点击外面时候div隐藏

 

刚开始想的很简单，给文本框一个onblur跟onfoucs事件，分别对应着文本框的隐藏跟显示。a标签注册点击事件。

<table>
            <tr>
                <td>
                </td>
                <td id="tdtd">
                    <input type="text" id="txtV" value="">
                    <div id="dv" style="display: none; border: solid 1px red">
                        <a href="javascript:void(0)" onclick="addFun(this,1212)">1212</a>
                    </div>
                </td>
            </tr>
        </table>

js：

 $(function () {
            $("#txtV").focus(function () {
                $("#dv").show();
            }).blur(function () {
                $("#dv").hide();
            });
        })

function addFun(a, value) {
            $(a).parent().prev("input").val(value);
        }

但是这样子出现了一个问题 ，当点击a标签的时候，他首先触发的文本框的blur事件，这样子a标签的onclick就没有效果。

后来朋友的提示下改了下，思路是这样子的，给文本框一个click事件，让div显示。而给body一个mousedown事件，当鼠标不在文本框以及div中的时候，让他隐藏，刚开始还是想获取mousedown时候的鼠标位置，跟div 的height，width比较，想想比较麻烦。后来朋友一指点，恍然大悟，可以获取选中id，跟文本框，div比较。

改后的js：

 $(function () {
            $("#txtV").click(function () {
                $("#dv").show();
            })

            $("body").bind("mousedown", function () {
                var obj = event.srcElement ? event.srcElement : event.target;//为了兼容IE以及Chrome/FF
                if (obj.id != "dv" && obj.id != "txtV" && $(obj).parents("#dv").length == 0) {
                    $("#dv").hide();
                }
            })

        })

        function addFun(a, value) {
            $(a).parent().prev("input").val(value);
        }

当选中的id不为div以及不为文本框，以及不为div中子元素（a标签）时候，则让div隐藏。