3가지 상태 이미지 버튼은 좋은 사용자 경험을 위해 필수적입니다. DOM 이벤트를 일부 처리하고 html을 변경하지 않고 3가지 상태 버튼을 구현했습니다. 다음 해결 방법의 핵심은 점선 선택 상자를 제거하고 루프 처리를 사용하지 않고 배경을 배치하는 것입니다. 배경 이미지와 테두리가 0으로 정의되어 있는 한 모든 버튼은 자동으로 3상태 버튼이 됩니다.
]
위에 대한 해결 방법이 몇 가지 더 있습니다. 유일한 단점은 Firefox에서는 Tab 키를 사용하여 버튼을 찾을 수 없다는 것입니다. 이는 가상 프레임을 제거하기 위해 클릭 이벤트가 차단되기 때문입니다. 다음 프로그램은 포커스를 이동하는 버튼 내에 새로운 보이지 않는 버튼을 생성하여 이 문제를 해결합니다.
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <script>
if(document.all)
document.execCommand("BackgroundImageCache",false,true)
document.body.onload=function(){
if(document.activeElement.tagName=="BUTTON")
document.activeElement.blur()
}
document.onmouseover=document.onmouseout=document.onmousedown=document.onmouseup=function(e){
var ee=e==null?event.srcElement:e.target
e=e||event
if(ee.tagName!="BUTTON"||ee.clientWidth!=ee.offsetWidth)
return
if(e.type=="mousedown"){
ee.style.backgroundPosition="0 -"+(2*ee.offsetHeight)
if(document.all)
ee.hideFocus=true
else
return false
}
if(e.type=="mouseover"||e.type=="mouseup")
ee.style.backgroundPosition="0 -"+ee.offsetHeight
if(e.type=="mouseout")
ee.style.backgroundPosition="0 0"
}
</script>]<script>
if(document.all)
document.execCommand("BackgroundImageCache",false,true)
document.body.onload=function(){
if(document.activeElement.tagName=="BUTTON")
document.activeElement.blur()
}
document.onmouseover=document.onmouseout=document.onmousedown=document.onmouseup=function(e){
var o,ee=e==null?event.srcElement:e.target
e=e||event
if(ee.tagName=="BUTTON"&&ee.clientWidth==ee.offsetWidth){
if(e.type=="mousedown"){
if((ee.lastChild||"").tagName!="BUTTON"){
o=document.createElement("button")
o.style.cssText="position:absolute;left:-9000"
ee.appendChild(o)
ee.onfocus=function(){ee.lastChild.focus()}
}
ee.style.backgroundPosition="0 -"+(2*ee.offsetHeight)
}
if(e.type=="mouseover"||e.type=="mouseup")
ee.style.backgroundPosition="0 -"+ee.offsetHeight
if(e.type=="mouseout")
ee.style.backgroundPosition="0 0"
}
}
</script>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
