jQuery 사용자 정의 요소 마우스 오른쪽 버튼 클릭 이벤트
- 小云云원래의
- 2018-01-17 13:11:451892검색
이 글은 주로 jQuery 커스텀 요소 우클릭 이벤트(구현 사례)를 다루고 있습니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
대부분의 경우 우리는 페이지와 상호 작용하기 위해 왼쪽 클릭을 사용하고, 오른쪽 클릭은 대부분 개발자가 요소를 검토하기 위해 사용합니다. 때로는 더 나은 상호 작용을 달성하기 위해 마우스 오른쪽 클릭 동작을 사용자 정의해야 하는 경우도 있습니다. 왼쪽 버튼으로 앞으로, 오른쪽 버튼으로 뒤로 이동할 수 있는 만화입니다.
첫 번째 단계는 브라우저의 기본 오른쪽 클릭 동작, 즉 팝업 상자를 차단하는 것입니다.
먼저 팝업 차단 기능을 대상 요소에 바인딩합니다.
//阻止浏览器默认右键点击事件
$("p").bind("contextmenu", function(){
return false;
})
이렇게 하면 p 요소의 마우스 오른쪽 버튼 클릭 이벤트가 차단되고 원하는 경우 브라우저의 다른 영역은 영향을 받지 않습니다. 전체 페이지 클릭 이벤트에서 마우스 오른쪽 버튼 클릭 이벤트를 차단하려면 다음과 같이 하세요:
document.oncontextmenu = function() {
return false;
}
다음으로 오른쪽 클릭 응답 기능을 요소에 바인딩할 수 있습니다:
$("p").mousedown(function(e) {
console.log(e.which);
//右键为3
if (3 == e.which) {
$(this).css({
"font-size": "-=2px"
});
} else if (1 == e.which) {
//左键为1
$(this).css({
"font-size": "+=3px"
});
}
})
예제 효과는 오른쪽 클릭의 글꼴 크기가 클릭이 줄어들고, 왼쪽 클릭의 글꼴 크기가 확대되며, 다른 영역은 기본 오른쪽 클릭 이벤트에 반응할 수 있습니다.
전체 코드:
<head>
<style type="text/css">
p{
font-size:20px;
}
</style>
<script src="../jquery.js"></script>
<script>
$(function() {
//阻止浏览器默认右键点击事件
/*document.oncontextmenu = function() {
return false;
}*/
//某元素组织右键点击事件
$("p").bind("contextmenu", function(){
return false;
})
$("p").mousedown(function(e) {
console.log(e.which);
//右键为3
if (3 == e.which) {
$(this).css({
"font-size": "-=2px"
});
} else if (1 == e.which) {
//左键为1
$(this).css({
"font-size": "+=3px"
});
}
})
})
</script>
</head>
<body>
<p>
p
</p>
</body>
관련 권장 사항:
C# 리스트뷰에서 마우스 오른쪽 버튼 클릭 시 셀의 내용을 가져오는 방법에 대한 자세한 설명
j왼쪽 및 오른쪽 마우스 클릭을 감지하는 쿼리 방법_jquery
jquery ztree는 마우스 오른쪽 버튼 클릭 수집 기능을 구현합니다
위 내용은 jQuery 사용자 정의 요소 마우스 오른쪽 버튼 클릭 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!