英文:
Why is the mousedown event getting rid of my click event?
问题
I am having an issue where my click event in a specific case is not being called. I can explain better using this example in the fiddle. I have also pasted the code below.
https://jsfiddle.net/qtdvn8oc/3/
<input type="button" id="openId" value="Open" />
<div id="qbr"></div>
$(document ).on("mousedown",function() {
console.log("mousedown");
$('#qbr').hide();
});
$("#openId").on("click", function() {
console.log("open");
$('#qbr').html("BLAH BLAH <input type=\"button\" id=\"closeId\" value=\"Close\" />");
$('#qbr').show();
});
$(document).on('click', "#closeId", function(e){
e.stopPropagation();
console.log("close");
$('#qbr').hide();
});
Look at the fiddle's console to see the issue I am facing.
When you click on the open button, you see the text and the close button. And it prints "mousedown" and "open" in the console.
Now when you click on the close button, you only see "mousedown" in the console. I need it to hit both mousedown and the close click events. This has to do with hiding the div on mousedown, but I do need that in place.
(The mousedown is there to close the div when you click anywhere on the document, think how a menu works).
Any help will be appreciated!
Thank you!
英文:
I am having an issue where my click event in a specific case is not being called. I can explain better using this example in the fiddle. I have also pasted the code below.
https://jsfiddle.net/qtdvn8oc/3/
<html>
<input type="button" id="openId" value="Open" />
<div id="qbr"></div>
</html>
$(document ).on("mousedown",function() {
console.log("mousedown");
$('#qbr').hide();
});
$("#openId").on("click", function() {
console.log("open");
$('#qbr').html("BLAH BLAH <input type=\"button\" id=\"closeId\" value=\"Close\" />");
$('#qbr').show();
});
$(document).on('click', "#closeId", function(e){
e.stopPropagation();
console.log("close");
$('#qbr').hide();
});
Look at the fiddle's console to see the issue I am facing.
When you click on the open button, you see the text and the close button. And it prints "mousedown" and "open" in the console.
Now when you click on the close button, you only see "mousedown" in the console. I need it to hit both mousedown and the close click events. This has to do with hiding the div on mousedown, but I do need that in place.
(The mousedown is there to close the div when you click anywhere on the document, think how a menu works).
Any help will be appreciated!
Thank you!
答案1
得分: 0
更新mousedown事件如下：
$(document).on("mousedown", function(e) {
if (e.target.id === 'closeId') {
return;
}
console.log("mousedown");
$('#qbr').hide();
});
英文:
Update the mousedown event like below :
$(document ).on("mousedown",function(e) {
if(e.target.id === 'closeId'){
return;
}
console.log("mousedown");
$('#qbr').hide();
});
答案2
得分: 0
以下是您要翻译的代码部分：
For my solution, I see that the `mousedown` event listener was added to the entire document, including the `#qbr` div. In order for your code to work, you have to select the entire document excluding `#qbr` like so: `$("*:not(#qbr)")`
Then, for each element selected, we have to exclude the listener for child elements using this: `if (event.target !== event.currentTarget) return`
This is to make sure clicking on `#qbr` does not trigger the listener for `<body>`, or any other parent listener.
With this two changes the code will look something like this.
$("*:not(#qbr)").on("mousedown",function(event) {
if (event.target !== event.currentTarget) return;
event.stopPropagation();
console.log("mousedown");
$('#qbr').hide();
});
$("#openId").on("click", function() {
console.log("open");
$('#qbr').html("BLAH BLAH <input type=\"button\" id=\"closeId\" value=\"Close\" />");
$('#qbr').show();
})
$(document).on('click', "#closeId", function(){
console.log("close");
$('#qbr').hide();
});
英文:
For my solution, I see that the mousedown event listener was added to the entire document, including the #qbr div. In order for your code to work, you have to select the entire document excluding #qbr like so: $("*:not(#qbr)")
Then, for each element selected, we have to exclude the listener for child elements using this: if (event.target !== event.currentTarget) return
This is to make sure clicking on #qbr does not trigger the listener for <body>, or any other parent listener.
With this two changes the code will look something like this.
$("*:not(#qbr)").on("mousedown",function(event) {
if (event.target !== event.currentTarget) return;
event.stopPropagation();
console.log("mousedown");
$('#qbr').hide();
});
$("#openId").on("click", function() {
console.log("open");
$('#qbr').html("BLAH BLAH <input type=\"button\" id=\"closeId\" value=\"Close\" />");
$('#qbr').show();
})
$(document).on('click', "#closeId", function(){
console.log("close");
$('#qbr').hide();
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论