2. 程式人生 > >解決blur和onclick衝突問題

解決blur和onclick衝突問題

阿新 • • 發佈：2018-12-21

場景：如下圖所示，當點選X按鈕時，會同時觸發blur和onclick事件，此時不需要執行blur事件中程式碼，只執行onclick事件中程式碼。 在這裡插入圖片描述

程式碼示例：

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css
 
("background-color","#FFFFCC");
  });
  
  $("input").blur(function(e){
    console.log(e.relatedTarget.className);
    if(e.relatedTarget && typeof e.relatedTarget.className != 'undefined' && e.relatedTarget.className == 'test'){
        return false;
	}
    $("input").css("background-color"
 
,"#D6D6FF");
  });
});
 function test(){
	alert(123);
 }
</script>
</head>
<body>
Enter your name: <input type="text" />
<p><button id="btn1" onclick="test()" class="test">觸發</button></p>
</body>
</html>

程式碼說明：上邊示例中，使用到了relatedTarget，在觸發blur的時候，返回當前事件涉及到的其他DOM元素，以判斷滑鼠點選了哪兒。 擴充套件

：劃重點：此示例中點選時間$(“input”).blur(function(e)({})中的e，打印出來，會看到很多屬性，可以利用其中屬性做很多其他事情，不僅僅是處理本文描述的場景。此示例中e打印出來如下圖： 在這裡插入圖片描述

相關推薦

解決blur和onclick衝突問題

場景：如下圖所示，當點選X按鈕時，會同時觸發blur和onclick事件，此時不需要執行blur事件中程式碼，只執行onclick事件中程式碼。 程式碼示例： <html> <h

給UITextView 頭部插入檢視（同理 給YYTextView加上頭部，解決scrollview和textview衝突的問題）

PS: _headView要成為textview的子view      [textview addsubview:_headview]; 有時候我們需要在UITextView的上面插入檢視的樣式，並且要求其隨著輸入一起滑動，這時候沒有必要再加一個UIScrollVie

如何解決mysql和wampserver衝突

如果你在安裝Wampserver之前，已經安裝了MySQL。 在安裝過程中發生衝突。 解決辦法如下： 1. 首先修改Wampserver->Apache->httpd.conf （1）將下面修改檔案中，為Allow from all。 （2）將修改

如何解決Databinding和Dagger衝突

1.在使用DataBinding，Android studio出現警告： Warning:Using incompatible plugins for the annotation processing: android-apt. This may result in

解決blur與click衝突

在開發中我們會經常遇到blur和click衝突的情況。下面敘述了開發中常遇到的“下拉框”的問題，並提供了兩種解決方案。 一、blur和click事件簡述 blur事件：當元素失去焦點時觸發blur事件；其為表單事件，blur和focus事件不會冒泡，其

表單驗證——input和required衝突解決

1. input和required衝突解決 Question： 使用表單提交驗證必填欄位時，若同時給 input[type="file"] 新增 readonly 以及 required 屬性，則發現，required必填驗證失效，既不會提示必填，也可以成功提交。 解決方法：將 r

hash衝突解決和javahash衝突解決

其實就是四種方法的演變 1.開放定址法 具體就是把資料的標誌等的對長度取模   有三種不同的取模 線性探測再雜湊 給資料的標誌加增量,取模 平方探測再雜湊 給資料的標誌平方，取模 隨機探測再雜湊 把資料的標誌隨機化，取模   線性，平方顯然很容被人猜出規律，所以最終是隨機

mint-UI上拉載入下拉重新整理和fastclick衝突問題解決

當我們的Vue專案為了解決IOS裝置事件點選卡頓，300ms的延遲的問題，引入了fastclick後，會有很多小的衝突，例如在使用mint-UI實現上拉載入和下拉重新整理的時候，經常會觸碰到點選事件進入下一個頁面，這是因為去掉300毫秒的延遲就會使得頁面特別靈敏，想著用阻止冒泡的方式來解決。 在

解決android-Ultra-Pull-To-Refresh 和ViewPager衝突的問題

由於PtrFrameLayout在dispatchOnTouchEvent中沒有判斷事件攔截的情況，導致PtrFrameLayout如果內部的content包含有ViewPager時會出現翻頁異常困難的情況，參考了網上的多的文章沒有解決，很多都是有bug的，今天在網上看到Sw

ecshop之transport和jquery衝突之完美解決方案

眾所周知：ecshop的transport.js檔案和Jquery是衝突的，兩個檔案不能同時呼叫，現給出以下完美解決方案:原因分析：     在transport.js檔案中，大概 580行到590行之間，這個句用於格式化json,他重寫了object的結構,導致於js框架

關於git和svn衝突時解決方法

<<<<<<< HEAD lalala ======= hehehe >>>>>>> xxxxxxxxxxxxxxxxxxxxxxx 分析：head 到 =======裡面的lalala是自己的commit的內容

解決移動端頁面的touchstart和touchmove衝突

解決移動端頁面的touchstart和touchmove衝突 最近在寫一個小專案，移動端的投票工具，作為一個第一次寫移動端的菜鳥，問題出現了： 為什麼一滑螢幕就觸發了一堆touchstart事件呀（摔！！！） 基本概念 touchstart事件：當手

解決jQuery和其他庫的衝突

在jQuery庫中，幾乎所有的外掛都被限制在它的名稱空間裡。通常，全域性物件都被很好地儲存在jQuery名稱空間裡，因此當把jQuery和其他JavaScript庫(例如Prototype、MooTools或Zepto)一起使用時，不會引起衝突。 注意：預設情

Android Studio中架包打包和依賴衝突解決

一、為什麼使用aar打包，而不是jar 隨著Android Studio的使用越來越廣泛，使用aar打包這種方式也越來越可行實際。 jar打包只打原始碼，像資原始檔不會打包，而aar恰恰是jar打包的補充完善，它會把程式碼和資源統統打包進一個檔案。 二

jQuery和Zepto衝突問題【解決】

特殊操作下，專案中同時引入這兩個檔案時，往往會有些衝突，應該加一句程式碼避免衝突 <script src="~/js/jquery-2.1.4.js"></script> <script>jQuery.noCon

解決ScrollView巢狀ListView顯示不完全和滑動衝突的問題

</pre>在開發中我們往往會遇到這樣奇葩的需求，讓一個ScrollView巢狀ListView，那麼我們就會遇到這樣一個問題，就是listView 顯示不完全和滾動衝突的問題。下面就來解決一下這個問題</p><p></p>&

解決jQuery和其他庫的衝突方法

在jQuery庫中，幾乎所有的外掛都被限制在它的名稱空間裡。通常，全域性物件都被很好地儲存在jQuery的名稱空間裡，所以當把jQuery庫和其他js庫（Prototype，MooTools或YUI）一起使用時，不會引起衝突。注意：預設情況下jQuery用“$”作為自身的快捷

解決jquery和其他庫衝突

方法一：jQuery.noConflict();//將變數$的控制權移交出來方法二：可以自定義一個快捷方式——var $j = jQuery.noConflict()。下面可以用$j進行dom操作。方法三：jQuery.noConflict();//將變數$的控制權移交出來 

解決jsp頁面直接取流顯示多個圖片時getOutputStream和getWriter()衝突問題

tomcat5下jsp出現getOutputStream() has already been called for this response異常的原因和解決方法在tomcat5下jsp中出現此錯誤一般都是在jsp中使用了輸出流（如輸出圖片驗證碼，檔案下載等）， 沒有妥善處

使用SIGALRM訊號量和sleep衝突的解決辦法

系統中的一個模組需要頻繁的獲取系統時間，使用linux中內建的函式開銷過大，因為需要的精度不是很高（毫秒級），索性用signal函式配合setitimer實現了個簡易的全域性時鐘。 但是後來發現，SIGALRM的中斷訊號回終止sleep，因為sleep就是用SIGALRM