Как да деактивирам събитието за кликване в jquery

Приложих плъзгане и пускане на Fileupload в jquery php, използвайки публикуване на ajax.

Използвам таг html входен файл с id upload_btn и div с id total за плъзгане и пускане на файловете.

За да премахнете бутона за разглеждане на екрана и да използвате div (total) като файл за разглеждане. добавих тези два реда в горната част на $(document).ready(function() {

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

След като пуснете избраните файлове в div(total), изброявайки всички файлове тук. Ако някой от избраните файлове надвишава максималния размер на файла, показвам бутон за изтриване за всеки файл, за да премахнете файла от списъка. Но след като щракнете върху изтриване, избраният файл се премахва успешно, но тъй като написах гореспоменатите две твърдения отново, събитието за разглеждане се извиква. Как мога да деактивирам разглеждането тук в тази ситуация.

Показване на всички файлове в div таг с id total, както следва:

 $(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++;
                    });

Надявам се, че разбирате какъв е проблемът ми... чакам вашите предложения...!

редактиране:

какво точно е необходимо, когато total div има някакво съдържание, тогава събитието за разглеждане не трябва да файл, когато щракнете върху премахване display_removebutton или дори total div


person fedrick    schedule 14.06.2014    source източник


Отговори (3)


ДЕМО 1 : stopPropagation();

ДЕМО 2 : preventDefault();


Можете да спрете събитието за щракване чрез

event.stopPropagation();

Or

event.preventDefault();

Методът event.stopPropagation() спира бълбукането на събитие към родителските елементи, предотвратявайки изпълнението на манипулатори на родителски събития.


Във вашия код.

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

});
person Shaunak D    schedule 14.06.2014
comment
Това ще има същия ефект, ако използвате preventDefault? - person Alex Char; 14.06.2014

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()
    });
  });
person chandu    schedule 14.06.2014

person    schedule
comment
можете ли да дадете малко обяснение. къде точно трябва да използвам вашия код - person fedrick; 15.06.2014
comment
можете ли да дадете окончателната структура на dom, която е генерирана? Искате да кажете, че когато щракнете върху бутона за изтриване, се задейства общото щракване ??? - person javadg; 15.06.2014
comment
не процесът е, когато щракна върху div total за първи път, трябва да се случи събитие за щракване fileToUpload. и след като плъзнете файловете в total div, тогава, ако размерът на файла увеличи лимита за максимален размер, тогава ще се появи бутон display_removebutton и сега, когато щракна върху display_removebutton , събитие fileToUpload не трябва да се случва - person fedrick; 15.06.2014
comment
Това означава, че div display_removebutton е вътре в общия div. Прав ли съм ??? - person javadg; 15.06.2014
comment
да значи това е проблема. за да разрешите това, направете следните неща: когато се щракне върху total div, добавете клас към total div и наименувайте този клас като активен. и променете кода на - document.getElementById('total').addEventListener('click',function(){ if(!$(this).hasClass(active)) {document.getElementById('fileToUpload').click() ;} - person javadg; 15.06.2014
comment
вижте новия отговор, публикуван от мен - person javadg; 15.06.2014
comment
последен опит :( Публикувах окончателно решение, което мога да дам. Съжалявам за неприятностите - person javadg; 15.06.2014