어떻게 각 왼쪽 클릭으로 길이를 줄이고 오른쪽 클릭으로 늘릴 수 있습니까?

Question

예 :

div.my{width: 100%;} 

<div class="my"></div> 

왼쪽 클릭 :

div{width: 75%;} 

오른쪽 클릭 : 모든

div{width: 100%;} 

Answer 1

target의 width을 100으로 초기화하십시오.

mousedown 이벤트를 청취하고 callback function에 전달 된 속성에서 클릭 한 마우스 버튼을 event으로 전달한 것을 확인하십시오.

마우스 버튼에 따라 callback function에서 add or subtract을 클릭합니다. 원하는 unit [이 경우 25]을 클릭하십시오.

계산 된 너비를 대상에 적용합니다.

작동 예제는 JSFiddle을 참조하십시오.

var elasticDivWidth = 100; 
 
$('.elastic-div').on('mousedown', function(e) { 
 
    e.preventDefault(); 
 
    if((e.which == 1)) { 
 
    elasticDivWidth = elasticDivWidth - 25; 
 
    } else if((e.which == 3)) { 
 
    elasticDivWidth = elasticDivWidth + 25; 
 
    } 
 
    $(this).css('width', elasticDivWidth + '%'); 
 
}).on('contextmenu', function(e){ 
 
    e.preventDefault(); 
 
});

.elastic-div { 
 
    height: 200px; 
 
    background: cyan; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="elastic-div"></div>

jQuery로

Answer 2

첫째, 당신은 마우스 왼쪽 버튼을 클릭하고 브라우저에서 마우스 오른쪽 버튼을 클릭을 사용하여주의해야합니다. 모든 브라우저가 올바른 클릭을 지원하지는 않습니다. 그래도 이것을 구현하려면 oncontextmenu 이벤트를 통해 오른쪽 클릭을 감지 할 수 있습니다.

This Stack Overflow post has an example for you in JavaScript.

기본적으로, 당신은 스크립트에 oncontextmenu가 발생하면 트리거 기능을 필요로 할 것입니다. document.getElementById() 또는 유사한 DOM 탐색 기능을 통해 요소에 액세스해야합니다. 그런 다음 JS에서 요소의 스타일 속성을 통해 너비를 변경합니다.

HTML 및 CSS 만 사용하여 마우스 오른쪽 단추로 액세스 할 수 없습니다.