如何减少每次左键单击和右键单击每次增加的长度？ [关闭]答案

【问题标题】：How I can reduce the length with each left click and right click each increase it? [closed]如何减少每次左键单击和右键单击每次增加的长度？ [关闭]
【发布时间】：2014-07-20 23:07:13
【问题描述】：

例子：

div.my{width: 100%;}

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

左键：

div{width: 75%;}

右键：

div{width: 100%;}

【问题讨论】：

有了 jquery，非常感谢！
我猜你应该使用一些代码。 BwaBascript 什么的。不过不确定。
应该是微不足道的-> jsfiddle.net/hmZ9k
问题应该在帖子的正文中，而不是在主题中。跨浏览器检测“右键单击”充其量是不可靠的。

标签： javascript jquery addition subtraction

【解决方案1】：

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

【讨论】：

很好！！非常感谢！
奇怪。答案仍然被否决。您应该投票并接受符合目的的答案。
不是我的反对意见，但不喜欢仅代码的答案。
我听到了。在上面的示例中，代码是否不足以解释。我肯定会在以后的答案中添加解释。
您可以编辑您的答案以包含解释，然后投票者可以删除投票。并且“代码是最好的文档”表示期望代码的逆向工程意图将到达同一个地方，cf Chinese whispers。

【解决方案2】：

首先，您应该小心在浏览器中使用左键和右键。并非所有浏览器都支持右键单击。如果还想实现这个，可以通过oncontextmenu事件检测到右键。

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

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

您不能仅使用 HTML 和 CSS 访问右键。

【讨论】：

感谢此信息！ =)
没问题！如果你喜欢我的回答，请给我点个赞。 ;)
该死，我试试，但我的代表是 15
+1 用于指出右键单击的问题。依赖它不是一个好主意。