js 브 라 우 저 마우스 우 클릭 으로 드 롭 다운 상자 이벤트 발생
2270 단어 JavaScript
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
height: 3000px;
}
ul{
width: 200px;
display: none;
list-style: none;
border: 1px solid #333;
box-shadow: 2px 2px 0px #aaa;
position: absolute;
}
ul li{
padding: 10px 0 10px 25px;
box-sizing: border-box;
font-size: 12px;
color: #111;
}
ul li:nth-child(3){
border-bottom: 1px solid #ddd;
}
ul li:nth-child(6){
border-bottom: 1px solid #ddd;
}
</style>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<script type="text/javascript">
var ul = document.querySelector('ul');
var li = document.querySelectorAll('li');
document.oncontextmenu = function (ev){
ev = ev || window.event;
// ， ，ture ，false ie9
ev.preventDefault?ev.preventDefault():ev.returnValue=false;
ul.style.display = 'block';
// clientWidth
// offsetWidth （ ）
var gapX = document.documentElement.clientWidth - ul.offsetWidth;
var Left = (ev.clientX > gapX )? gapX : ev.clientX;
// scrollTop
// clientHeight
// offsetHeight
var gapY = (document.documentElement.scrollTop + document.documentElement.clientHeight - ul.offsetHeight);
var Top = ev.offsetY > gapY ? gapY : ev.offsetY;
//
// console.log('clientY '+ev.offsetY)
// console.log(document.documentElement.scrollTop)
// console.log(Left)
// console.log(Top)
ul.style.left = Left + 'px';
ul.style.top = Top + 'px';
}
document.onclick = function (ev){
ev = ev || window.event;
ev.preventDefault?ev.preventDefault():ev.returnValue=false;
ul.style.display = 'none';
}
</script>
</code></pre>
<br/>
</div>
</div>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
