快速了解惰性属性

涓嬮潰鏄疄闄呮晥鏋?鍙互鐪嬪埌娣诲姞inert灞炴€у悗锛屾暣涓厓绱犱笉鑳借繘琛屼换浣曚氦浜掞紝灏卞ソ鍍忔暣涓狣OM閮借鍐荤粨浜嗭紝鎵€浠ュ彲浠ョ悊瑙ｄ负鈥滃喕缁撯€濓紝杩欐牱鍙兘浼氭洿濂斤紝涔熷彲浠ユ煡鐪嬪湪绾縟emo锛歨tmlinert(codepen.io)orhtmlinert(runjs.work)鍙﹀锛宨nert鏄竴涓竷灏斿睘鎬э紝鍜屽钩鏃剁湅鍒扮殑disabled,hidden绛変竴鑷达紝鍙鏈夎繖涓狝ttribute锛屽氨浠ｈ〃true锛屼笉瀛樺湪鍒欎负false杩欎釜闇€瑕佹敞鎰?.inert鐨勫疄闄呭簲鐢ㄦ槸涓€涓柊鐨勫睘鎬э紝鎴戞€绘槸鎯冲埌涓€浜涘疄闄呯殑搴旂敤鍦烘櫙銆傝繖閲屾湁涓ょ鎯呭喌锛?.閾炬帴鐨勭鐢ㄤ互鍓嶏紝瑕佺鐢ㄩ摼鎺ワ紝鍙兘鏄繖鏍风殑{pointer-events:none;}浣嗘槸锛岃繖鍙槸闃叉浜嗛紶鏍囩偣鍑昏涓猴紝閿洏浠嶇劧鍙互鑾峰緱鐒︾偣.涓轰簡闃叉閿洏浜嬩欢锛岄渶瑕佸姞涓妕abindex=-1杩欐牱閿洏灏变笉浼氳仛鐒﹀湪a閾炬帴涓婂彟澶栬繕鏈夋洿鏆村姏鐨勮В鍐虫柟娉曪紝鐩存帴鍘绘帀a鐨刪ref鍚庡睘鎬.href=''琚Щ闄わ紝a鍙槸涓€涓櫘閫氱殑鏍囩锛屼笉浼氳鑱氱劍銆備絾鏄繖涓柟妗堥渶瑕佷繚鐣檃somewhere鍘熸湁鐨刪ref灞炴€э紝浠ヤ究鍚庣画鎭㈠銆傚鏋滀娇鐢ㄦ儼鎬у睘鎬э紝鍒欏彲浠ョ洿鎺ュ湪鍚勪釜鏂瑰悜绂佺敤瀹冦€?ainerthref="/xxx">涔熷彲浠ラ€氳繃[inert]灞炴€ц嚜瀹氫箟鏍峰紡a[inert]{opacity:.5}銆傚湪瑙嗚涓婏紝鎮ㄥ彲浠ユ洿濂藉湴鍖哄垎鍝簺閮ㄥ垎琚鐢ㄣ€傚綋鐒讹紝涓嶄粎鏄摼鎺ワ紝浠讳綍鍏朵粬鍏冪礌閮藉彲浠ラ€氳繃杩欑鏂瑰紡绂佺敤銆傜‘璁ゃ€佸彇娑堟寜閽€傚鏋滈渶瑕佸吋椤鹃敭鐩樿闂紝鑲畾甯屾湜寮圭獥鎵撳紑鍚庯紝鐒︾偣鍙兘鍦ㄥ脊绐楀唴閮ㄥ垏鎹紝涓嶈兘绉诲埌澶栭潰銆傛瘮濡傚儚杩欐牱锛岀劍鐐硅繕鏄彲浠ュ線澶栬窇銆傜幇鍦ㄦ湁浜唅nert锛屽氨鍙互寰堟柟渚跨殑澶勭悊杩欎釜闂浜嗭紝鍙渶瑕佸湪澶栧眰鍏冪礌娣诲姞inert鍗冲彲鎵撳紑寮圭獥link/div>

...

鏁堟灉濡備笅鍏跺疄濡傛灉鐢ㄥ師鏉ョ殑寮圭獥锛岄€氳繃showModal鎵撳紑鍚庯紝宸茬粡鏀寔浜嗘湰鍦扮劍鐐圭壒鎬ialog.showModal()鍙互鐪佸幓寰堝鐒︾偣鎺т欢Control锛屼负浠€涔堜笉鐢╪ative鍛紵3.鍏煎鎬у拰鎬荤粨杩欑姣旇緝娉ㄩ噸浣撻獙鐨勫睘鎬у叾瀹炰笉闇€瑕佸叧娉ㄥ吋瀹规€с€傚叾瀹炲ぇ閮ㄥ垎鍦版柟閮戒笉闇€瑕併€備笉鏀寔鎴栧奖鍝嶄富瑕佸姛鑳姐€備互涓嬫槸鍏煎鎬х姸鎬侌煓傚叏閮ㄥ吋瀹癸紒闄や簡鐗堟湰瑕佹眰鏈夌偣楂樸€傛病鍏崇郴锛屾湁鍙敤鐨刾olyfill锛屽涓媁ICG/inert:鐢ㄤ簬鎯版€у睘鎬у拰灞炴€х殑Polyfill銆?github.com)鐪嬩簡澶ц嚧鍘熺悊锛屽拰鍓嶉潰鐨勫鐞嗗熀鏈竴鏍凤紝pinter-events鍜宼abindex=-1鐨勭粍鍚堬紝鎬讳箣鍗充娇寰堟柊锛屼篃鍙互鎻愬墠浣跨敤.鎬荤粨涓€涓嬩富瑕佺煡璇嗙偣锛歩nert鏄疕TMLElement鐨勪竴涓睘鎬э紝鍙互绂佹鎵€鏈夌殑鐢ㄦ埛浜や簰銆傞潪甯稿交搴曪紝灏卞儚銆婂啺闆缂樸€嬩竴鏍枫€俰nert鏄竴涓狟ooleanAttribute锛屽彧瑕佽繖涓睘鎬у瓨鍦ㄥ氨鏄痶rue锛屽惁鍒欏氨鏄痜alse銆傛儼鎬у彲浠ヨ交鏉剧鐢ㄩ摼鎺ワ紝鍖呮嫭浠讳綍鍏朵粬鍏冪礌銆俰nert鍙互寰堟柟渚跨殑鎺у埗鐒︾偣鐨勮寖鍥达紝璁╁脊绐椾腑鐨勭劍鐐逛笉浼氳烦杞埌澶栭儴鍘熺敓瀵硅瘽妗嗐€俿howModal宸茬粡鍏峰浜嗗眬閮ㄧ劍鐐圭殑鐗规€с€傚彲浠ュ鐢紝澶氭敞鎰忓師浠躲€備竴浜涗笉璧风溂鐨勫睘鎬у彲鑳戒細璁╀綘鐨勪唬鐮佹洿绮剧畝銆佹洿浼橀泤銆傛渶鍚庯紝濡傛灉瑙夊緱瀵逛綘鏈夊ソ澶勫拰甯姪锛屾杩庣偣璧炪€佹敹钘忋€佽浆鍙戔潳鉂も潳娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇澶т睛鎺?/p>