1. 程式人生 > >js動態新增點選事件常見錯誤

js動態新增點選事件常見錯誤

在前端中,我們經常要新增點選事件。尤其是在動態的元素上新增點選事件。經常會新增之後沒有反應。 
可能的原因:

  1. 點選事件的名稱寫錯 
    這種低階的錯誤經常犯,在js程式碼中新增的事件其實是沒有新增的。兩者的名字不同或者,選擇器有問題沒有選中元素。 
    這個問題可以在除錯的視窗選中元素在監聽事件中去檢視有沒有新增上監聽事件 
    如圖: 
    這裡寫圖片描述 
    就已經新增上了點選事件,如果沒有。那麼檢查你的變數名和選擇器。

  2. 在除錯中明明新增到了點選事件,但是就是沒有響應 
    今天就遇到了這個問題,這種問題就兩種可能。

    ①有另外一個事件和他的功能相反,也執行了這就是事件的冒泡。所有沒有反應,其實事件是執行了。打斷點也可以進入斷點。那麼解決問題的辦法有兩種

一是直接return false 阻止了事件的冒泡同時也阻止了行為 程式碼如下

$("selector").on('click',function(){
            return false;
        });
  • 1
  • 2
  • 3

二是使用 event.stopPropagation 來組織冒泡,這個只會阻止事件的冒泡,並不會阻止行為的冒泡 程式碼如下

$("selector").on('click',function(){
             event.stopPropagation();
        });
  • 1
  • 2
  • 3

②佈局的問題,點選事件加上了。但是沒有點選到這個元素,所以時間沒有觸發。可能的原因就是,給這個元素定位之後有一個z-index屬性設定了負值所以沒有點選到這個元素。把這個屬性改掉就可以了