【求助】TD焦点问题
javascript吧
全部回复
仅看楼主
level 1
bytheworld073 楼主
td在table里面,table在div里面,为什么点击td,就触发这个div失去焦点事件了?
代码如下,我想在点击日期的时候,窗口不会隐藏,该怎么解决?
2021年09月14日 08点09分 1
level 1
bytheworld073 楼主
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日期选择</title>
<link rel="stylesheet" href="_getdate.css">
<script src="_getdate.js" type="text/javascript"></script>
</head>
<body>
<input type="text" onclick="_getdate(this)"/>
<p></p>
<!-------------------------------------------->
<div id="get_date" style="display:none;" onblur ="this.style.display='none';">
<h5 id="gd_topdiv"></h5>
<div>
<h4 id="gd_y"></h4>
<h2 id="gd_d"></h2>
<div>
<a onclick="_subtractyear()">«</a><a onclick="_subtractmonth()">‹</a>
<input type="text" id="gd_t1" onchange="_cngdate()"/>年
<input type="text" id="gd_t2" onchange="_cngdate()"/>月
<a onclick="_addmonth()">›</a><a onclick="_addyear()">»</a>
</div>
<table id="date_table">
</table>
</div>
<div>
<b onclick="_gettoday()">今天 </b>
<button type="button" onclick="document.getElementById('get_date').style.display='none';">取消</button>
<button type="button" onclick="_putdate()">确定</button>
</div>
</div>
<!---------------------------------------------------------------->
<input type="text" onclick="_getdate(this)"/><input type="text" onclick="_getdate(this)"/>
</body>
</html>
2021年09月14日 08点09分 2
level 1
bytheworld073 楼主
JS:
function _putdate(){
var v1=document.getElementById('gd_y').innerHTML;
var v2=document.getElementById('gd_d').innerHTML;
get_date_txt.value=v1+v2.slice(0,-4);
document.getElementById('get_date').style.display='none';
}
function _getdate(obj) {
var y=obj.offsetTop;
var x=obj.offsetLeft;
var h=obj.scrollHeight;
var dateobj=document.getElementById('get_date');
dateobj.style.top=(y+h)
+3
+"px";
dateobj.style.left=(x+1)+"px";
get_date_txt=obj;
_gettoday();
dateobj.focus();
}
function _gettoday() {
var myDate = new Date();
var td=myDate.toLocaleDateString();//当天日期
var hh3=document.getElementById('gd_topdiv');
hh3.innerHTML=td;
get_date_txt.value=td;
var t1=document.getElementById('gd_t1');
var t2=document.getElementById('gd_t2');
t1.value=myDate.getFullYear();//当年
t2.value=myDate.getMonth()+1;//当月0-11
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var wd=weekday[myDate.getDay()];
var gdy=document.getElementById('gd_y');
var gdd=document.getElementById('gd_d');
gdy.innerHTML=t1.value+"年";
gdd.innerHTML=t2.value+"月"+ myDate.getDate() +"日 "+wd;
_cngdate();
document.getElementById("get_date").style.display="";
}
function _cngdate(){
var myDate = new Date();
var t1=document.getElementById('gd_t1');
var t2=document.getElementById('gd_t2');
if(t1.value=="" || t2.value==""){return;}
var ty=+t1.value;
var tm=+t2.value;
var d1=new Date(ty,tm,0).getDate();//这月天数
var d0=new Date(ty,tm-1,0).getDate();//上月天数
var w=new Date(ty,tm-1,1).getDay();//这月1日星期几,(0-6,0代表星期天)
var datetbl=document.getElementById("date_table");
datetbl.innerHTML="";
var str="<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
//日历第一行
var pos=1;
if (w>0){
str+="<tr>";
for(var i=0;i<w;i++){
str+="<td onclick='_clkdate(this)' style='color:#778899;'>"+(d0-w+i+1)+"</td>";
}
for (var i=1;i<7-w+1;i++){
str+="<td onclick='_clkdate(this)'>"+i+"</td>";
pos+=1;
}
str+="</tr>";
}
for (var i=pos;i<d1+1;i++){
str+="<tr>";
for (var j=0;j<7;j++){
str+="<td onclick='_clkdate(this)'>"+pos+"</td>";
if (pos==d1){pos=0;}
pos+=1;
}
i=i+6;
str+="</tr>";
}
datetbl.innerHTML=str;
var rows = datetbl.rows.length;
for (var i=5;i<rows;i++){
for (var j=0;j<7;j++){
var obj=datetbl.rows[i].cells[j];
if (obj.innerText<8){
obj.style.color='#778899';
}
}
}
var d1=myDate.getFullYear();
var d2=myDate.getMonth()+1;
var d3=myDate.getDate();
if (ty!=d1 || tm!=d2){return;}
if (d3<15){
for (var i=1;i<5;i++){
for (var j=0;j<7;j++){
var obj=datetbl.rows[i].cells[j];
if (obj.innerText==d3){
obj.style.backgroundColor='#008000';
obj.style.color='White';
break;
}
}
}
}else{
for (var i=3;i<rows;i++){
for (var j=0;j<7;j++){
var obj=datetbl.rows[i].cells[j];
if (obj.innerText==d3){
obj.style.backgroundColor='#008000';
obj.style.color='White';
break;
}
}
}
}
}
function _clkdate(obj){
var d=obj.innerHTML;
var cols = obj.cellIndex;//列号
var rows=obj.parentElement.rowIndex;//行号
if (rows==1&&obj.innerHTML>21){_subtractmonth();}
if (rows>4&&obj.innerHTML<8){_addmonth();}
var t1=document.getElementById('gd_t1');
var t2=document.getElementById('gd_t2');
var gdy=document.getElementById('gd_y');
var gdd=document.getElementById('gd_d');
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var wd=weekday[cols];
gdy.innerHTML=t1.value+"年";
gdd.innerHTML=t2.value+"月"+ d +"日 "+wd;
}
function _subtractyear(){
var myDate = new Date();
var t2=document.getElementById('gd_t2');
var t1=document.getElementById('gd_t1');
if (t1.value==""){
t1.value=myDate.getFullYear();
}else{
t1.value=t1.value-1;
}
_cngdate();
}
function _subtractmonth(){
var myDate = new Date();
var t2=document.getElementById('gd_t2');
var t1=document.getElementById('gd_t1');
if (t2.value==""){
t2.value=myDate.getMonth()+1;
}else{
t2.value=--t2.value;
}
if (t2.value<1){
t2.value=12;
t1.value=t1.value-1;
}
_cngdate();
}
function _addmonth(){
var myDate = new Date();
var t2=document.getElementById('gd_t2');
var t1=document.getElementById('gd_t1');
if (t2.value==""){
t2.value=myDate.getMonth()+1;
}else{
t2.value=++t2.value;
}
if (t2.value>12){
t2.value=1;
t1.value=++t1.value;
}
_cngdate();
}
function _addyear(){
var myDate = new Date();
var t2=document.getElementById('gd_t2');
var t1=document.getElementById('gd_t1');
if (t1.value==""){
t1.value=myDate.getFullYear();
}else{
t1.value=++t1.value;
}
_cngdate();
}
2021年09月14日 08点09分 3
level 1
bytheworld073 楼主
CSS:
* {padding: 0;margin: 0;}
#get_date{
position:absolute;
width:280px;
padding:10px;
border:2px double green;
text-align: center;
font-family: Verdana, sans-serif;
background: lightblue;
overflow: auto;
}
#gd_topdiv{
padding:5px 5px 0 0;
text-align: right;
background-color: #008000;
color:White;
}
#get_date h4{
background-color: #008000;
text-align: left;
color:White;
}
#get_date h2{
background-color: #008000;
color:White;
text-align: center;
margin:0px 0px 20px 0px;
padding:0 0 10px 0;
}
#get_date a{
cursor:pointer;
margin:20px 8px 10px 8px;
}

#get_date a:hover {color: #
ff7701}
#gd_t1{
margin:0px 0px 10px 0px;
width:50px;
border-style: none;
font-size: 18px;
width:50px;
height:20px;
background: lightblue;
}
#gd_t2{
border-style: none;
font-size: 18px;
width:30px;
height:20px;
text-align:center;
background: lightblue;
}
#get_date td{
font-size: 18px;
cursor:pointer;
padding:8px;
border-radius: 50%;
}
#get_date td:hover {background-color: #ff7701}
#get_date b{
padding:0 0 0 3px;
font-size: 15px;
cursor:pointer;
margin:0px 25px 0px 82px;
background-color: #008000;
color:White;
border:2px double green;
border-radius: 3px;
}
#get_date b:hover {color: #ff7701}
#get_date button{
border-radius: 5px;
font-size: 15px;
font-weight:bold;
width:50px;
height:25px;
line-height:25px;
margin:20px 5px 0px 0px;
background-color: #008000;
color:White;
}
2021年09月14日 08点09分 4
level 1
bytheworld073 楼主
在Chrome没问题,在IE下点击日期会隐藏DIV窗口。
2021年09月14日 08点09分 5
在Chrome里,不会激发onblur事件。
2021年09月14日 10点09分
level 10
我试了一下,把dateobj.focus()注释掉点击日期就不会触发onblur,但是点“今天”之后再点日期就会触发onblur
2021年09月14日 10点09分 7
只要点了table或input ,DIV就失去焦点。
2021年09月15日 01点09分
@bytheworld073 去掉div的onblur事件,如果需要点击空白地方就隐藏div的话就给body加个点击事件,然后在其它点击事件方法加上阻止冒泡
2021年09月15日 03点09分
我用P代替tr 用h6代替td 。input用strong代替。现在又出现新问题:ie下是可以了,谷歌浏览器不会激发div的onblur事件,虽然语句里已经写了div获得焦点。
2021年09月15日 07点09分
@bytheworld073 给div加个tableindex=1试试
2021年09月15日 08点09分
level 3
阻止冒泡
2021年09月14日 11点09分 8
阻止了TABLE冒泡后。只要点击“今天”,父div又获得焦点,再点table,又激发DIV失去焦点事件。
2021年09月15日 01点09分
level 1
bytheworld073 楼主
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日期选择</title>
<link rel="stylesheet" href="_getdate.css">
<script src="_getdate.js" type="text/javascript"></script>
</head>
<body>
<input type="text" onclick="_getdate(this)"/>
<p></p>
<!----------------document.getElementById('get_date')---contenteditable="true"------tabindex="1"-------onBlur="_hidedatediv()"-----window.event.cancelBubble=true;------->
<div id="get_date" style="display:none" tabindex="1" onBlur="this.style.display='none'">
<h5 id="gd_topdiv"></h5>
<div>
<h4 id="gd_y"></h4>
<h2 id="gd_d"></h2>
<div>
<a onclick="_subtractyear()">«</a><a onclick="_subtractmonth()">‹</a>
<strong id="gd_t1"></strong>年
<strong id="gd_t2"></strong>月
<a onclick="_addmonth()">›</a><a onclick="_addyear()">»</a>
</div>
<div>
<h3>日</h3><h3>一</h3><h3>二</h3><h3>三</h3><h3>四</h3><h3>五</h3><h3>六</h3>
</div>
<div id="date_table">
</div>
</div>
<div>
<br />
<b id="_fd1" onclick="_gettoday()">今天 </b>
<b id="_fd2" onclick="document.getElementById('get_date').style.display='none'">取消</b>
<b id="_fd3" onclick="_putdate()">确定</b>
</div>
</div>
<!---------------------------------------------------------------->
<input type="text" onclick="_getdate(this)"/><input type="text" onclick="_getdate(this)"/>
</body>
</html>
2021年09月15日 13点09分 9
level 1
bytheworld073 楼主
function _putdate(){
var v1=document.getElementById('gd_y').innerHTML;
var v2=document.getElementById('gd_d').innerHTML;
get_date_txt.value=v1+v2.slice(0,-3);
document.getElementById('get_date').style.display='none';
}
function _getdate(obj) {
get_date_txt=obj;
var y=obj.offsetTop;
var x=obj.offsetLeft;
var h=obj.scrollHeight;
var dateobj=document.getElementById('get_date');
dateobj.style.top=(y+h)+3+"px";
dateobj.style.left=(x+1)+"px";
_gettoday();
dateobj.focus();
}
function _gettoday() {
var myDate = new Date();
var td=myDate.toLocaleDateString();//当天日期
var hh3=document.getElementById('gd_topdiv');
hh3.innerHTML=td;
get_date_txt.value=td;
var t1=document.getElementById('gd_t1');
var t2=document.getElementById('gd_t2');
t1.innerHTML=myDate.getFullYear();//当年
t2.innerHTML=myDate.getMonth()+1;//当月0-11
var weekday=["周日","周一","周二","周三","周四","周五","周六"];
var wd=weekday[myDate.getDay()];
var gdy=document.getElementById('gd_y');
var gdd=document.getElementById('gd_d');
gdy.innerHTML=t1.innerHTML+"年";
gdd.innerHTML=t2.innerHTML+"月"+ myDate.getDate() +"日 "+wd;
_cngdate();
document.getElementById("get_date").style.display="";
}
function _cngdate(){
var myDate = new Date();
var t1=document.getElementById('gd_t1');
var t2=document.getElementById('gd_t2');
if(t1.innerHTML=="" || t2.innerHTML==""){return;}
var ty=+t1.innerHTML;
var tm=+t2.innerHTML;
var d1=new Date(ty,tm,0).getDate();//这月天数
var d0=new Date(ty,tm-1,0).getDate();//上月天数
var w=new Date(ty,tm-1,1).getDay();//这月1日星期几,(0-6,0代表星期天)
var datetbl=document.getElementById("date_table");
datetbl.innerHTML="";
var str="";
//日历第一行
var pos=1;
if (w>0){
str+="<p>";
for(var i=0;i<w;i++){
str+="<h6 onclick='_clkdate(this)' style='color:#778899;'>"+(d0-w+i+1)+"</h6>";
}
for (var i=1;i<7-w+1;i++){
str+="<h6 onclick='_clkdate(this)'>"+i+"</h6>";
pos+=1;
}
str+="</p>";
}
for (var i=pos;i<d1+1;i++){
str+="<p>";
for (var j=0;j<7;j++){
str+="<h6 onclick='_clkdate(this)'>"+pos+"</h6>";
if (pos==d1){pos=0;}
pos+=1;
}
i=i+6;
str+="</p>";
}
datetbl.innerHTML=str;
var obj = datetbl.childNodes;
for (var i=obj.length-2;i>obj.length-9;i--){
if (obj[i].innerHTML<8){
obj[i].style.color='#778899';
}
}
var d1=myDate.getFullYear();
var d2=myDate.getMonth()+1;
var d3=myDate.getDate();
if (ty!=d1 || tm!=d2){return;}
if (d3<15){
for (var i=16;i>0;i--){
if (obj[i].innerHTML==d3){
obj[i].style.backgroundColor='#008000';
obj[i].style.color='White';
break;
}
}
}else{
for (var i=19;i<obj.length;i++){
if (obj[i].innerHTML==d3){
obj[i].style.backgroundColor='#008000';
obj[i].style.color='White';
break;
}
}
}
}
function _clkdate(obj){
var datetbl=document.getElementById("date_table");
var obj2 = datetbl.childNodes;
for (var i=1;i<obj2.length;i++){
obj2[i].style.border='none';
}
obj.style.border='2px dashed #008000';
var index = [].indexOf.call(obj.parentNode.querySelectorAll(obj.tagName),obj);
var w=index-parseInt(index/7)*7;
var d=obj.innerHTML;
if (index<8&&d>21){
_subtractmonth();
var i = datetbl.childNodes.length;
obj2[i-8+w].style.border='2px dashed #008000';
}
if (index>21&&d<8){
_addmonth();
obj2[w+1].style.border='2px dashed #008000';
}
var t1=document.getElementById('gd_t1');
var t2=document.getElementById('gd_t2');
var gdy=document.getElementById('gd_y');
var gdd=document.getElementById('gd_d');
var weekday=["周日","周一","周二","周三","周四","周五","周六"];
var wd=weekday[w];
gdy.innerHTML=t1.innerHTML+"年";
gdd.innerHTML=t2.innerHTML+"月"+ d +"日 "+wd;
}
function _subtractyear(){
var myDate = new Date();
var t2=document.getElementById('gd_t2');
var t1=document.getElementById('gd_t1');
if (t1.innerHTML==""){
t1.innerHTML=myDate.getFullYear();
}else{
t1.innerHTML=t1.innerHTML-1;
}
_cngdate();
}
function _subtractmonth(){
var myDate = new Date();
var t2=document.getElementById('gd_t2');
var t1=document.getElementById('gd_t1');
if (t2.innerHTML==""){
t2.innerHTML=myDate.getMonth()+1;
}else{
t2.innerHTML=t2.innerHTML-1;
}
if (t2.innerHTML<1){
t2.innerHTML=12;
t1.innerHTML=t1.innerHTML-1;
}
_cngdate();
}
function _addmonth(){
var myDate = new Date();
var t2=document.getElementById('gd_t2');
var t1=document.getElementById('gd_t1');
if (t2.innerHTML==""){
t2.innerHTML=myDate.getMonth()+1;
}else{
t2.innerHTML=++t2.innerHTML;
}
if (t2.innerHTML>12){
t2.innerHTML=1;
t1.innerHTML=++t1.innerHTML;
}
_cngdate();
}
function _addyear(){
var myDate = new Date();
var t2=document.getElementById('gd_t2');
var t1=document.getElementById('gd_t1');
if (t1.innerHTML==""){
t1.innerHTML=myDate.getFullYear();
}else{
t1.innerHTML=++t1.innerHTML;
}
_cngdate();
}
2021年09月15日 13点09分 10
level 1
bytheworld073 楼主
* {padding: 0;margin: 0;}
#get_date{
position:absolute;
width:265px;
padding:10px;
border:2px double green;
text-align: center;
font-family: Verdana, sans-serif;
background: lightblue;
overflow: auto;
}
#gd_topdiv{
padding:5px 5px 0 0;
text-align: right;
background-color: #008000;
color:White;
}
#get_date h4{
background-color: #008000;
text-align: left;
color:White;
}
#get_date h2{
background-color: #008000;
color:White;
text-align: center;
margin:0px 0px 20px 0px;
padding:0 0 10px 0;
}
#get_date a{
cursor:pointer;
padding:10px;
margin:0px 3px 0px 3px;
}

#get_date a:hover {color: #
ff7701}
#get_date p{clear:left;}
#get_date h6,#get_date h3{
float:left;
font-size: 15px;
width:23px;
height:18px;
padding:5px 5px 5px 5px;
margin:3px 2px 3px 2px;
border-radius: 50%;
}
#get_date h6{cursor:pointer;}
#get_date h6:hover {background-color: #ff7701}
#_fd1{
padding:0 0 0 3px;
font-size: 15px;
cursor:pointer;
margin:20px 20px 0px 72px;
background-color: #008000;
color:White;
border:2px double green;
border-radius: 3px;
}

#_fd2,#
_fd3{
padding:1px 6px 1px 6px;
font-size: 15px;
cursor:pointer;
margin:20px 0px 0px 5px;
background-color: #008000;
color:White;
border:2px double green;
border-radius: 3px;
text-align: center;
}
#get_date b:hover {color: #ff7701}
2021年09月15日 13点09分 11
1