Question

我已经使用ajax发布在jquery php中实现了Fileupload拖放。

我使用标识为upload_btn的 html输入文件标记和标识为total的div来拖放文件。

要删除屏幕上的浏览按钮并使用div（total）作为浏览文件。我在$(document).ready(function() {

的顶部添加了这两行

  document.getElementById('total').addEventListener('click',function(){
  document.getElementById('fileToUpload').click();

删除div（total）中的所选文件后列出所有文件。如果任何所选文件超过最大文件大小，则显示每个文件的删除按钮以从列表中删除该文件。但是在点击删除后，所选文件正在删除成功，但是当我再次编写上述两个语句时，浏览事件正在调用。如何在这种情况下禁用浏览。

显示标识为total的div标记中的所有文件，如下所示：

 $(upfiles).each(function(index, file) 
                    {
                        if(total_size > limit) // size limit comparision
                             display_removebutton = "<img width='20px' style='cursor:pointer;' height='20px' class='class_remove' id='remove_"+int_loop+"' src='images/DeleteRed.png' />"
                        size = Math.round( file.size / 1024 );
                        if(size > 1024) 
                                size_display =  Math.round(size / 1024 * 100)/100 + ' mb'; // converted to mb
                        else
                                size_display = size + ' kb';
                        if(size > limit)
                        {
                            style_limitexceed = "style='background:#FFCCCC;border-radius:17px;height:30px;margin-top:6px;'";
                        }
                        else
                        {
                            style_limitexceed = "";
                        }
                        $('#total').append("<div id='div_selec"+int_loop+"' "+style_limitexceed+"><b>File Name :</b> "+file.name + "<b> Size:</b>" + size_display + display_removebutton + "</div>"+"" ); 
                        $("#remove_"+int_loop).click(function() {
                        if(confirm( "Do you want to delete file : "+ file.name+ "?" ) === true)
                        {

// here we need to remove the click event for **fileupload input tag**
                                var curr_id = this.id;
                                var id = curr_id.substr(7);
                                $("#div_selec"+id).empty();
                                upfiles.splice(index, 1)
                                $("#div_selec"+id).fadeOut('slow');
                                total_size = total_size - (file.size/1024);
                                if(total_size < limit)
                                {
                                    $("#total img:last-child").remove()
                                    $("#div_errorLog").fadeOut('slow');
                                }
                        }
                         });
                         int_loop++;
                    });

希望你们明白我的问题是什么......等待你的建议......！

编辑

究竟需要什么，当总div有一些内容时，浏览事件不应该提交，点击删除display_removebutton甚至total div

Answer 1

DEMO 1：stopPropagation（）;

DEMO 2 ：preventDefault（）;

您可以通过

停止点击事件

event.stopPropagation();

或者

event.preventDefault();

event.stopPropagation()方法停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。

在您的代码中。

document.getElementById('total').addEventListener('click',function(event){
  event.preventDefault();
  document.getElementById('fileToUpload').click();

});

Answer 2

JQUERY DOC

除了保持元素上的任何其他处理程序不被执行之外，此方法还通过隐式调用event.stopPropagation().来停止冒泡。简单地阻止事件冒泡到祖先元素但允许其他事件处理程序在相同的元素，我们可以使用event.stopPropagation()代替。

使用event.isImmediatePropagationStopped（）来了解是否曾调用此方法（在该事件对象上）。

使用event.stopImmediatePropagation();或event.stopPropagation()停止点击事件。

$('document').ready(function(){
       document.getElementById('total').addEventListener('click',function(event){
      document.getElementById('fileToUpload').click();
      event.stopImmediatePropagation(); (or) event.stopPropagation()
    });
  });

Answer 3

$("yourClass").click(function(e){
    e.preventDefault();
});

Answer 4

$(upfiles).each(function(index, file) 
                {
                    if(total_size > limit) // size limit comparision
                         display_removebutton = "<img width='20px' style='cursor:pointer;' height='20px' class='class_remove' id='remove_"+int_loop+"' src='images/DeleteRed.png' />"
                    size = Math.round( file.size / 1024 );
                    if(size > 1024) 
                            size_display =  Math.round(size / 1024 * 100)/100 + ' mb';     // converted to mb
                    else
                            size_display = size + ' kb';
                    if(size > limit)
                    {
                        style_limitexceed = "style='background:#FFCCCC;border-radius:17px;height:30px;margin-top:6px;'";
                    }
                    else
                    {
                        style_limitexceed = "";
                    }
                    $('#total').append("<div id='div_selec"+int_loop+"' "+style_limitexceed+"><b>File Name :</b> "+file.name + "<b> Size:</b>" + size_display + display_removebutton + "</div>"+"" ); 
                    $("#remove_"+int_loop).click(function(e) {
                    e.preventDefault();
                    if(confirm( "Do you want to delete file : "+ file.name+ "?" ) === true)
                    {

// here we need to remove the click event for **fileupload input tag**
                            var curr_id = this.id;
                            var id = curr_id.substr(7);
                            $("#div_selec"+id).empty();
                            upfiles.splice(index, 1)
                            $("#div_selec"+id).fadeOut('slow');
                            total_size = total_size - (file.size/1024);
                            if(total_size < limit)
                            {
                                $("#total img:last-child").remove()
                                $("#div_errorLog").fadeOut('slow');
                            }
                    }
                     });
                     int_loop++;
                });

如何在jquery中禁用click事件

4 个答案: