文件输入的默认动作消失 while parent div return false

Question

我有一个包含 input 元素的父 div，每次单击父 div 时，它 return 就会 false。

<div class="media-asset">
    <input  type="file" name="picture-label" >
</div>

$('body').on({
        click:function(){
            return false;
        }
},'.media-asset');

问题是父divreturnsfalse时，一个文件input的默认动作没有了，不会提示用户上传文件。是否可以手动触发文件输入的默认动作？

$('body').on({
            click:function(){
                //manually trigger the file input
                return false;
            }
    },'.media-asset input');

我让父级 div 为 return false 的原因是当用户在父级 div 外部单击时，它会隐藏父级 div，并且当用户在父级内部单击时 div，它不会隐藏自己。

Answer 1

无需手动触发。在 '.media-asset input' 单击事件上指定 event.stopPropagation() 并从中删除 return false：

event.stopPropagation()

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

— event.stopPropagation() - jQuery API Documentation

$('body').on({
  click:function(){
    return false;
  }
},'.media-asset');

$('body').on({
  click:function(event){
    event.stopPropagation();
  }
},'.media-asset input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="media-asset">
    <input  type="file" name="picture-label" >
</div>

文件输入的默认动作消失 while parent div return false

The default action of a file input disappears while parent div return false

html

javascript

css

jquery

jquery-events

event.stopPropagation()