Javascript 单击div上的任意位置以触发输入

我试图让它成为这样，当你点击一个特定的div时，它会触发一个输入按钮来打开uploadcare小部件

这里是有问题的HTML

<div class="col-md-6 image-preview-single">
<img src="" alt="" class="img-responsive card-shadow hidden">
    <div id="logo-upload" class="add-new-short add-new-home-realtor card-shadow-mini btn-file uploader-homicity" style="display:block;text-decoration:none; cursor: pointer;">
        <i class="fa fa-photo"/>
        <input type="hidden" role="uploadcare-uploader" name="logo" data-upload-url-base="" data-images-only="true" data-crop="150x150" data-clearable="true" id="logo-input">
            <div class="uploadcare-widget uploadcare-widget-option-clearable uploadcare-widget-status-ready" data-status="ready">
                <div class="uploadcare-widget-dragndrop-area">
                    Drop a file here
                </div>
                <div class="uploadcare-widget-status uploadcare-widget-circle uploadcare-widget-circle--canvas">
                    <canvas width="56" height="56"/>
                </div>
                <div class="uploadcare-widget-text">
                </div>
                <div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-open">Choose an image</div>
                <div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-cancel">Cancel</div>
                <div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-remove">Remove</div>
            </div> 
    </div>

$( '#logo-upload' ).on( 'click', function() {
    $('input#logo-input').click();
});

这是控制台错误

Uncaught RangeError: Maximum call stack size exceeded
    at RegExp.exec (<anonymous>)
    at n.fn.init (jquery.min.js:2)
    at n (jquery.min.js:2)
    at HTMLDivElement.<anonymous> (uploadcare.js:72)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)
    at Object.trigger (jquery.min.js:4)
    at HTMLInputElement.<anonymous> (jquery.min.js:4)
    at Function.each (jquery.min.js:2)
    at n.fn.init.each (jquery.min.js:2)

未捕获范围错误：超过最大调用堆栈大小
在RegExp.exec（）处
位于n.fn.init（jquery.min.js:2）
at n（jquery.min.js:2）
在HTMLDEVELENT。（uploadcare.js:72）
在htmldevelment.dispatch（jquery.min.js:3）
位于htmldevelment.r.handle（jquery.min.js:3）
at Object.trigger（jquery.min.js:4）
在HTMLInputElement。（jquery.min.js:4）
在Function.each（jquery.min.js:2）
在n.fn.init.each（jquery.min.js:2）

我错过了什么

---

谢谢

您还需要在输入时添加此事件单击：

$('input#logo-input').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    ...your code
});

您需要这样做，因为您创建了无限循环。

---

当您触发单击输入时，此输入位于

徽标上载

div内，单击输入将传播到此容器，并创建无限循环。

您还需要在输入时添加此事件单击：

$('input#logo-input').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    ...your code
});

您需要这样做，因为您创建了无限循环。 当您触发单击输入时，此输入位于

徽标上载

div内，单击输入将传播到此容器，并创建无限循环。

两个选项：

使用

仅用html激活输入：

点击这里

使用

focus（）

而不是

click（）

和

stopPropagation（）

：

$（“#徽标上载”）。打开（'click'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（'input#logo input'）.focus（）；
});

两种选择：

使用

仅用html激活输入：

点击这里

使用

focus（）

而不是

click（）

和

stopPropagation（）

：

$（“#徽标上载”）。打开（'click'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（'input#logo input'）.focus（）；
});

嗯

因此，您希望打开Uploadcare对话框，而不是小部件

首先，从页面中删除所有小部件的HTML代码，它是由库添加的，应该在文档中。 其次，使用以下代码

$('#logo-upload').on('click', function() {
    uploadcare.Widget(input_selector).openDialog();
});

嗯

因此，您希望打开Uploadcare对话框，而不是小部件

首先，从页面中删除所有小部件的HTML代码，它是由库添加的，应该在文档中。 其次，使用以下代码

$('#logo-upload').on('click', function() {
    uploadcare.Widget(input_selector).openDialog();
});

就这么做吧

var inputSP = input.click(function (e) { e.stopPropagation(); });

dropper.on('click', function (e) {
   e.stopPropagation();   
    // here we first stop propagation then make a call to click event 
   inputSP; 
   input.click();
});

就这么做吧

var inputSP = input.click(function (e) { e.stopPropagation(); });

dropper.on('click', function (e) {
   e.stopPropagation();   
    // here we first stop propagation then make a call to click event 
   inputSP; 
   input.click();
});

---

由于元素嵌套在内部，您必须防止事件冒泡。您调试过吗？它在一个循环中。由于元素嵌套在其中，您必须防止事件冒泡。您调试过吗？它在循环中。

preventDefault

在这里是无害的，但不必要

stopPropagation

正在做这项工作。是的@DanielBeck

preventDefault

在这里并不重要，但

stopPropagation

是停止无限循环的关键。

preventDefault

在这里是无害的，但不必要的

stopPropagation

正在做这项工作。是的@DanielBeck

preventDefault

在这里并不重要，但

stopPropagation

是停止无限循环的关键。