第36行的onclick方法为什么不起作用

xunfengqi 2018-07-06 04:00:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#back{
width: 500px;
height: 300px;
border: black solid 3px;
background-image: url("1.jpg");
position: absolute;
}
.font{
width: 100px;
height:100px;
background: aquamarine;
float: left;
}
</style>
<script>
window.onload=function () {
var str='';
var oDiv=document.getElementById("back");
for(i=0;i<15;i++){
str +='<div class=\'font\'></div>';
}
oDiv.innerHTML=str;
var aDiv=document.getElementsByClassName("font");
for(j=0;j<15;j++){
aDiv[j].onmouseover=function () {
this.style.visibility='hidden';
}
}
for(j=0;j<15;j++){
aDiv[j].onclick=function () {
this.style.visibility='visible';
}
}

}
</script>
</head>
<body>
<div id="back"></div>
</body>
</html>
...全文
152 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
xunfengqi 2018-07-09
  • 打赏
  • 举报
回复
多谢各位....
刘已墨 2018-07-06
  • 打赏
  • 举报
回复
window.onload=function () {
var str='';
var oDiv=document.getElementById("back");
for(i=0;i<15;i++){
str +='<div class=\'font\'></div>';
}
oDiv.innerHTML=str;
var aDiv=document.getElementsByClassName("font");
for(j=0;j<15;j++){
aDiv[j].onmouseover=function () {
this.style.visibility='visible'; //他无效了
}
}
for(j=0;j<15;j++){
aDiv[j].onclick=function () {
this.style.visibility='hidden'; //这样他就有效了 因为隐藏了感知不到了
}
}
}
DaveLeeCN 2018-07-06
  • 打赏
  • 举报
回复
鼠标悬浮的时候都隐藏掉了,自然也就点不到了
asdqsca 2018-07-06
  • 打赏
  • 举报
回复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#back{
width: 500px;
height: 300px;
border: black solid 3px;
background-image: url("1.jpg");
position: absolute;
}
.font{
width: 100px;
height:100px;
background: aquamarine;
float: left;
}
</style>
<script>
window.onload=function () {
var str='';
var oDiv=document.getElementById("back");
for(i=0;i<15;i++){
str +='<div class=\'font\'></div>';
}
oDiv.innerHTML=str;
var aDiv=document.getElementsByClassName("font");
for(j=0;j<15;j++){
aDiv[j].onmouseover=function () {
this.style.opacity= 0;
}
}
for(j=0;j<15;j++){
aDiv[j].onclick=function () {
this.style.opacity=1;
}
}
}
</script>
</head>
<body>
<div id="back"></div>
</body>
</html>
你可以把visibility 换成 opacity visibility 被置为hidden的时候 虽然当前元素仍然会在dom中占位置 但是当前元素是不可选择的 所以不能触发你绑定的事件
天际的海浪 2018-07-06
  • 打赏
  • 举报
回复
元素隐藏了当然不可能再触发事件,
要触发事件元素就不应该隐藏,而是应该opacity(透明度)设置为0

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧