div調整大小時如何停止點擊計數

Question

我有一個 function 來檢查在 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的值。

Answer 1

這里可行的解決方案：

 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>

Answer 2

 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>

Answer 3

一種簡單的解決方案是計算 window 已調整大小的次數並減小 i，以便僅顯示已單擊且未調整大小的次數。

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