gpt4 book ai didi

javascript - 无法在 JQuery 中选择元素并执行简单事件

转载 作者:行者123 更新时间:2023-11-28 04:46:18 25 4
gpt4 key购买 nike

我无法使用 JQuery 单击函数在“ Canvas ”上创建简单的单击事件。

$(document).ready(function(){
alert("test");

$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>

出现“测试”消息,但上面的功能不起作用。 div“中间”的其他 sibling (我没有包括因为我试图删除它们进行测试并且它仍然发生)可以执行事件但只有这个div和内部不能执行单个事件。

还尝试了 console.log($("#canvas")) 并在下面获取了一些数据。

[div#canvas]

这是完整的 html:

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="/demo/resources/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/demo/resources/themes/custom/css/custom.css" rel="stylesheet" />
<script src="/demo/resources/themes/bootstrap/js/bootstrap.min.js"></script>
<script src="/Sketchy-demo/resources/themes/custom/js/custom.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>App Page</title>
</head>
<body>

<div class="middle">
<div id="canvas"></div>
</div>

</body>
</html>

自定义.css

.middle{
z-index: -1;
position: relative;
display: block;
height: 88%;
width:100%;
top: 0px;
left:0px;
margin: 0px;
background-color: transparent;
}

#canvas{
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;

}

下面是 div 的图像:enter image description here

这真的很令人沮丧,因为这是我无法调用的基本函数。

编辑:

我添加了一个 https://jsfiddle.net/5mtt2khu/

有任何问题请告诉我。谢谢!

最佳答案

event.target元素做。并匹配条件

Updated js Fiddle

$(document).ready(function() {
alert("test");

$(".middle").click(function(e) {
if($(e.target).attr('id')== 'canvas'){
alert('canvas')
//do stuff for canvas
}
else{
alert("middle");
//do stuff for middle
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>

已更新

Remove or change the z-index

$(document).ready(function() {
alert("test");
$(".middle").click(function(e) {
if ($(e.target).attr('id') == 'canvas') {
alert('canvas')
//do stuff for canvas
} else {
alert("middle");
//do stuff for middle
}
});
});
.middle {
z-index:0;/*remove or change > -1*/
position: relative;
display: block;
height: 88%;
width: 100%;
top: 0px;
left: 0px;
margin: 0px;
background-color: red;
}

#canvas {
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="middle">
<div id="canvas"></div>
</div>

关于javascript - 无法在 JQuery 中选择元素并执行简单事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44670360/

25 4 0
文章推荐: css - 如何使
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com