Question

我的父div包含一个隐藏的表单元素（输入）：

$(document).ready(function () {

    $('.parent').on('click', function (event) {
        $(this).toggleClass('active');
		$(this).find('.child').trigger('click');
    });


    $('.child').on('click', function (event) {
      var theMsg = event.altKey ? 'true' : 'false';
       $('.parent span').html(theMsg);
    });

});

.parent {
    width:100px;
    height: 100px;
    background: #eee;
}
.child {
    display:none;
}
.active {
    background: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
    ALT: <span> </span>
    <input class='child'>
</div>

当调用我的父点击处理程序时，我会注意是否按下了ALT键。我正在尝试触发（'click'）隐藏的输入元素，并传递altKey状态。我没有尝试过这样的事情。我错过了什么？

Answer 1

点击事件有sytax错误。 )之后您还有click。它应该是：

$('.parent').on('click',function(event) {
 var theChild=$(this).find('.child');
 theChild.trigger('click');
});

Answer 2

我不确定您使用的浏览器或操作系统平台。我的代码用ubuntu chrome测试。

在铬浏览器中用于选择菜单选项的Alt键。

供您参考：

event.altKey not working in chrome and IE

所以，您可以使用Clt键或Shift键。

您可以查看此内容

jQuery: How to catch keydown + mouse click event?

    $(document).ready(function() {

  $(".parent").on('click', function(e) {
    console.log(e.altKey, e.ctrlKey, e.shiftKey);
    var theChild = $(this).find('.child');
    theChild.trigger('click');
  });

  $(".child").on('click', function(e) {
    e.stopPropagation();
    console.log('child');
  });

});

如果有任何问题，请告诉我。

使用查询将父事件转发给子

2 个答案: