How to stop click count when a div is resizing

Question

I have a function to check how many times click action is done on a div. This div has resized functionality. So when I try to resize it, that resize action got to count as clicked on that div. How I can avoid this resize click count.

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>

I want not to increment the value of i if div is resized. Only should increment the value of i when clicked inside the border of the div.

Have you tried working with `onresize`. Refer this [documentation](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize). Cheers — Elysian Storm, Jun 28 '20 at 11:41
Can you please post your resize functionality div `code` here as well ? — Always Helping, Jun 28 '20 at 11:42
This might actually be something browsers want to fix. There is no standard way to distinguish a click inside the little triangle from a click outside it. — D. Pardal, Jun 28 '20 at 11:44
@ElysianStorm as far I know from documentation onresize function is for window resize. But for my case I am resizing the div. :( — Fokrule, Jun 28 '20 at 13:36
@AlwaysHelping there is no other functionality for resize. I am resizing the div using CSS property. — Fokrule, Jun 28 '20 at 13:37
[https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed](https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed) is really helpful for the provided question. — Elysian Storm, Jun 28 '20 at 16:17
Does this answer your question? [How to detect DIV's dimension changed?](https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed) — Elysian Storm, Jun 28 '20 at 16:18
@Fokrule does my solution work for you? [Link to solution](https://stackoverflow.com/questions/62621914/how-to-stop-click-count-when-a-div-is-resizing/62623121#62623121) — Kharel, Jun 29 '20 at 06:51

score 1 · Answer 1 · answered Jun 28 '20 at 12:03

1

Workable Solution here:

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>

answered Jun 28 '20 at 12:03

sidverma

1,159
12
24

Resize is not working. It is showing `Uncaught TypeError: $(...).click(...).resizable is not a function`. Even in your given answer it is showing this error . – Fokrule Jun 28 '20 at 13:29
@Fokrule code is in jquery and the code snippet I can attach here is in JS .. that's why! Copy the code and paste in JSFiddle editor – sidverma Jun 28 '20 at 13:31

Kharel · Accepted Answer · 2020-06-28T13:32:55.903

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>

score 0 · Answer 3 · answered Jun 28 '20 at 11:53

One simple solution is to count how many times the window has been resized and decrease the i so it shows only the times that has been clicked and not been resized.

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

How to stop click count when a div is resizing

3 Answers3