div调整大小时如何停止点击计数答案

【问题标题】：How to stop click count when a div is resizingdiv调整大小时如何停止点击计数
【发布时间】：2020-06-28 11:31:01
【问题描述】：

我有一个功能可以检查在 div 上完成了多少次点击操作。此 div 具有调整大小的功能。因此，当我尝试调整它的大小时，该调整大小操作必须计为单击该 div。如何避免这种调整大小的点击次数。

let i = 0;
$(".resize").click(function(){
  console.log(i++);
});

.resize {
  color: rgb(0, 255, 255);
  mix-blend-mode: difference;
  margin: 0;
  padding: 0;
  width: 300px;
  height: 300px;
  border: 2px solid red;
  resize: both;
  overflow: auto;
}

/* Stack snippet specific CSS */
.as-console-wrapper {
  position: initial !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resize"></div>

如果调整 div 的大小，我不想增加 i 的值。只有在 div 的边框内单击时才应增加 i 的值。

【问题讨论】：

您是否尝试过使用onresize。请参阅此documentation。干杯
您能否在此处也发布您的调整大小功能 div code ？
这实际上可能是浏览器想要修复的问题。没有标准的方法来区分小三角形内部的点击和外部的点击。
@ElysianStorm 据我所知，onresize 函数用于调整窗口大小。但就我而言，我正在调整 div 的大小。 :(
@AlwaysHelping 没有其他调整大小的功能。我正在使用 CSS 属性调整 div 的大小。

标签： javascript html jquery css

【解决方案1】：

const ObserveResize = (function() {
  let store = [];

  function getDimension(el) {
    const rect = el.getBoundingClientRect();

    return {
      w: rect.width,
      h: rect.height
    };
  }

  function isResized({
    el,
    d
  }, d2) {
    return Object.keys(d).some(key => d[key] !== d2[key]);
  }

  function isSubscribed(el) {
    return !!store.filter(record => record.el === el).length;
  }

  function unsubscribe(el) {
    store = store.filter(h => h.el !== el);
  }

  function subscribe(el) {
    const unsubscriber = () => unsubscribe(el);

    if (isSubscribed(el)) return unsubscriber;

    const d = getDimension(el);

    store.push({
      el,
      d
    });

    return unsubscriber;
  }

  function run() {
    store.forEach(record => {
      const d2 = getDimension(el);

      if (isResized(record, d2)) {
        record.d = d2;
        el.dispatchEvent(new Event("resize"));
      }
    });

    requestAnimationFrame(run);
  }

  run();

  return subscribe;
})();

const el = document.querySelector(".resize");
let clickCount = 0;
let resizing = false;

el.addEventListener("click", () => {
  if (resizing) return;

  ++clickCount;

  console.log(`clickCount: ${clickCount}`);
});

function onMouseUp() {
  console.log("After Resize Mouse Up");
  requestAnimationFrame(() => {
    resizing = false;
  });

  el.removeEventListener("mouseup", onMouseUp);
}

el.addEventListener("resize", function() {
  resizing = true;

  el.removeEventListener("mouseup", onMouseUp);
  el.addEventListener("mouseup", onMouseUp);
});

const unsubscribe = ObserveResize(el);

.resize {
  color: rgb(0, 255, 255);
  mix-blend-mode: difference;
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
  border: 2px solid red;
  resize: both;
  overflow: auto;
}


/* Stack snippet specific CSS */

.as-console-wrapper {
  position: initial !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resize"></div>

【讨论】：

【解决方案2】：

这里可行的解决方案：

let i = 0;

$('.resize').click(function(e){
    if(!$(e.target).is('.ui-resizable-handle'))
     console.log(i++);
        $(this).toggleClass('selected');
}).resizable();

.resize.selected { border: 2px solid black;}

.resize {
  color: rgb(0, 255, 255);

  margin: 0;
  padding: 0;
  width: 300px;
  height: 300px;
  border: 2px solid red;

  overflow: auto;
}

/* Stack snippet specific CSS */
.as-console-wrapper {
  position: initial !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resize"></div>

【讨论】：

调整大小不起作用。它显示Uncaught TypeError: $(...).click(...).resizable is not a function。即使在您给出的答案中，它也会显示此错误。
@Fokrule 代码在 jquery 中，我可以在此处附加的代码 sn-p 在 JS 中 .. 这就是原因！复制代码并粘贴到 JSFiddle 编辑器中

【解决方案3】：

一个简单的解决方案是计算窗口调整大小的次数并减小 i，以便仅显示已单击但未调整大小的次数。

$(".resize").addEventListener(myFunction);
var x =0;
function myFunction(){
x++; 
//Decrease the i with the times that the window has been 
resized
i-=x
}

【讨论】：