javascript - 遮罩层获取,触发事件后,如何触发它下面的元素的事件?

问题描述

问 题

如图
这是一个表单的输入框,它的html如下:
<li>

<div>
    <label>用 &nbsp; 户  &nbsp; 名</label>
    <input type="text" name="u_name" id="u_name" class="w_txt">
    <p class="v_menu">请输入用户名</p>
</div>
<span class="p_txt"></span>

</li>
li中的p标签为一个遮罩层(点击输入框/输入框Onfocus时隐藏,并使输入框为获取焦点状态),获取焦点时如图:

现在问题来了:因为p标签是定位在input上的遮罩层(z-index较高),当我想点击输入框,获取焦点,开始输入的时候,其实并没有点到输入框(有点绕),我给p标签绑定了click事件,点击就隐藏,可是input标签并没有获取到焦点,效果如图:

我该怎么样实现点击p标签,遮罩层隐藏,同时对应的输入框获取焦点--感觉就像是直接点击到了ipnut,获取焦点一样一样的(单独的获取输入框焦点,和隐藏遮罩层能实现,两个效果加在一起先后实现就弄不来了),是用事件冒泡?不过这冒泡是嵌套层级关系才适用吧?这同级元素如何冒泡?或者有其他方法?求指教
事件冒泡是无法解决这样的需求的--不是所有的事件都能冒泡，例如：blur、focus、load、unload(看资料找到的)

解决方案

厉害了word哥，你们老板真是个奇葩...非要另外写

var doc = document,
    u_name = doc.querySelector('#u_name'),
    v_menu = doc.querySelector('.v_menu');

    v_menu.addEventListener('click',function(){
        this.style.display = 'none';
        u_name.focus();
    });
    u_name.addEventListener('blur',function(){
        v_menu.style.display = 'block';
    })

你的那个问题

v_menu.addEventListener('click', function() {
    var ele = this.parentNode; //this指向正常
    console.log(ele)
    var elem = ele.getElementsByTagName("input"); //elem正常
    console.log(elem)//这返回的是一个类数组集合
    console.log(elem[0])//这才是你要操作的元素
    this.style.display = 'none';
    // elem.focus(); //就是报错
    elem[0].focus(); //这个就正常了
    // u_name.focus();
});

这篇关于javascript - 遮罩层获取,触发事件后,如何触发它下面的元素的事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！