點擊元素類型

好了，所以我基本上是試圖隱藏指定的元素，當有人點擊的形式之外，但問題是，沒有什麼實際工作點擊元素類型

$("#overlayBG").click(function(e) { 
    if(e.target === "form") { 
     $("#overlayBG").hide(); 
    } else { 
     console.log("Form not clicked"); 
    } 
});

基本上我收到輸出是「表不點擊」

來源

2017-02-17 Miki Liki

您可以發佈您的HT ml代碼，以便我們可以檢查 –

'event.target'不是一個字符串，因此'event.target ===「form」'將始終爲false。您需要檢查元素名稱，或者將其與實際的DOM元素進行比較。要獲取元素的標籤名稱，請使用'event.target.tagName.toLowerCase（）'....或者因爲您使用jQuery，請使用'.is（）'方法...'$（event.target）。就是（ '形式'）'。 –

喬希是對的，如果你想自己檢查它然後嘗試console.log（e.target）; – kdyz

$（「正文」）。單擊（函數（e）中{

if (e.target.id != "overlayBG") { 

    $("#overlayBG").hide(); 

} else { 

    console.log("overlayBG is clicked"); 

}

}）;

來源

2017-02-17 04:47:50

正如我在評論中提到：

您是對象event.target比較字符串。因此event.target === "form"將永遠是錯誤的。您需要檢查元素名稱，或者將其與實際的DOM元素進行比較。

例如，要獲取元素的標記名稱，請使用event.target.tagName.toLowerCase()。或者，因爲你使用jQuery，您可以使用.is() method：

$("#overlayBG").click(function(event) { 
    if (!$(event.target).is('form')) { 
    $("#overlayBG").hide(); 
    } else { 
    alert("The form was clicked..."); 
    } 
});

然而，這隻會檢查是否event.target是form元素（點擊表格的子元素時將無法正常工作）。因此，你應該遍歷DOM和檢查，看看是否在最近的祖先元素是form元素：，

Updated Example

$("#overlayBG").click(function(event) { 
    if (!$(event.target).closest('form').length) { 
    $("#overlayBG").hide(); 
    } else { 
    alert("The form was clicked..."); 
    } 
});

此外，如果你要聽所有點擊事件：

Updated Example

$(document).on('click', function(event) { 
    if (!$(event.target).closest('#overlayBG form').length) { 
    $("#overlayBG").hide(); 
    } else { 
    alert("The form was clicked..."); 
    } 
});

來源

2017-02-17 04:49:38

Fiddle

我通常會做的是獲取目標的ID並將其用作我的參考點。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<div id="overlayBG"> 
    <form method="POST"> 
    <input type="text" placeholder "some text..." /> 
    </form> 
</div>

CSS

#overlayBG { 
    width: 500px; 
    height: 500px; 
    background-color: red; 
} 

form { 
    width: 50%; 
    height: 50%; 
    background-color: blue; 
}

$("#overlayBG").click(function(e) { 
    var id = $(this).attr('id'); 
    if (id === "overlayBG") { 
    $("#overlayBG").hide(); 
    } else { 
    alert("Form not clicked"); 
    } 
});

這裏的關鍵是

var id = $(this).attr('id'); //Get id of the clicked element 
     if (id === "overlayBG") { //Check if the id is what you're looking for 
     $("#overlayBG").hide(); 
     }

來源

2017-02-17 04:52:28 kdyz

點擊元素類型

回答

相關問題