javascript - 当父 div 返回 false 时，文件输入的默认操作消失

Question

我有一个父 div，其中包含一个 input 元素，每次单击父 div 时，它都会返回 false 。

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

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

问题是当父div返回false时，一个文件input的默认 Action 没了，也不会提示用户上传文件。是否可以手动触发文件输入的默认操作？

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

我让父 div 返回 false 的原因是当用户在父 div 外部单击时，它会隐藏父 div >，当用户单击父 div 内部时，它不会隐藏自己。

Answer 1

无需手动触发。指定event.stopPropagation()在 '.media-asset input' 点击事件上，并从中删除 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>