如何每次左键单击和右键单击都能缩短长度

How I can reduce the length with each left click and right click each increase it?

本文关键字：单击 右键 何每次      更新时间：2023-09-26

示例：

div.my{width: 100%;}
<div class="my"></div>

左键单击：

div{width: 75%;}

右键单击：

div{width: 100%;}

将target的width初始化为100[如文章中所述]。

监听mousedown事件，并从传递给callback function的event的which属性中确定单击的鼠标按钮。

在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>

首先，您应该小心在浏览器中使用左键单击和右键单击。并非所有浏览器都支持右键单击。如果您仍然希望实现此功能，则可以通过oncontextmenu事件检测到右键单击。

这篇Stack Overflow文章为您提供了一个JavaScript示例。

基本上，您将需要编写一个在oncontextmenu发生时触发的函数的脚本。您需要通过document.getElementById()或类似的DOM遍历函数来访问该元素。然后通过JS中元素的样式属性更改宽度。

仅使用HTML和CSS无法访问右键单击。

相关文章：