Cannot read property 'nodeType' of null; audio元素默認樣式下載按鈕

1.chrome-->console拋出以下錯誤：

Uncaught TypeError: Cannot read property 'nodeType' of null

錯誤緣由：從stackoverflow上查了，這個bug多是因爲dom元素未加載完而先執行了jquery代碼引發的。

錯誤分析：我這個實例爲：點擊某個表單標籤時（如checkbox），widget從新進行了render()操做（將dom元素remove並從新繪製）,而formit插件給form表單默認增長的監聽事件還做用在已經被移除dom的元素上，因此執行formit事件的時候，target元素爲null，報錯拋出。出錯的代碼是jquery裏追蹤事件的捕獲與冒泡的一段代碼。參數爲null時則報此錯誤。

解決的方法是：查走代碼，去掉不合理的重繪，或將重繪過程放到listener都執行完成後進行。

2.chrome的audio元素默認樣式修改

chrome的audio元素默認樣式不是很美觀，大多數時候下載按鈕顯得不少餘。若是須要修改播放樣式有以下兩個解決方案：

1）隱藏默認的audio，本身重繪一個audio播放器，並用js與默認播放器關聯控制。這樣播放器樣式徹底自定義，能夠知足任何對於美觀的要求。

2）對默認audio的樣式進行一些修改，讓它達到需求。這樣播放器的外觀仍是很侷限，若是對樣式要求不高能夠這麼作。

咱們這裏主要討論第二種，首先設置屬性：controls="controls"，顯示audio播放控件，顯示出來之後，在這裏我主要說兩點：

1）如何隱藏下載按鈕

在stackoverflow上查後，能夠設置audio的屬性

controlsList="nodownload"

2）如何隱藏音量按鈕or播放進度條。

通過調試發現，能夠經過設置audio標籤的width，瀏覽器會自動進行audio的自適應。

在設置width爲300的時候，顯示效果：

在設置width爲200的時候，顯示效果：

在設置width爲100的時候，顯示效果：

在此基礎上咱們能夠進行必定的掩蓋與縮放實現咱們想要的效果。舉個例子：咱們要播放進度條而不顯示音量按鈕，那麼咱們就能夠採用audio的width爲300，並將audio標籤放到一個ovflow:hidden;width:210px;的外層div中。