How would I skip a specific event using boolean flag?

Question

I'm making a function that combined 2 events in single on method for controlling, editing more better and easily like this:

class EventManager {
  constructor($el) {
    this.$el = $el;
    this.mainSwitch = false;
    this.subSwitch = false;
    this.condition = (!this.mainSwitch && !this.subSwitch); // false false then
    this.condition2 = (!this.mainSwitch && this.subSwitch); // false true then
  }
  start(e) {
    if (this.condition) {
      console.log(e.type);
      this.mainSwitch = true;
      return false; // return keyword for end the function
    } else if (this.condition2) {
      this.mainSwitch = false;
      this.subSwitch = false; // Go back to the default statement.
      return false;
    }
    return false;
  }
  move(e) {
    if (this.mainSwitch == true && this.subSwitch == false) {
      console.log(e.type);
    }
  }
  end(e) {
    if (this.mainSwitch == true && this.subSwitch == false) {
      console.log(e.type);
      this.mainSwitch = false;
      this.subSwitch = true;
    }
  }
  apply() {
    this.$el.on('touchstart mousedown', (e) => {
      this.start(e);
    })
    $('html').on({
      ['touchmove mousemove']: (e) => this.move(e),
      ['touchend mouseup']: (e) => this.end(e)
    })
  }
}
var thatEvent = new EventManager($('#link'));
thatEvent.apply();

      a {
        width: 100%;
        height: 100px;
        border-radius: 10px;
        background-color: brown;
        font-family: Helvetica;
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
      }

    <a id="link" target="_blank" href="https://google.co.uk" draggable="false">
      Click/Touch and Drag/Swipe
    </a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I've added boolean flags for skipping a specific events group which is mouseevents because this code runs twice when I touch the element.

The issue is, boolean flags doesn't skip the mousedown event as I expected. After this.condition2 managed, it rolls back for comparing this.condition. And then fires console.log(e.type).

At first, I thought boolean flags could skip the event. Because I added return keyword every if sections for cutting off the function after the comparing had done.

This issue causes that mousedown event is going to disable permanently. For using the mousedown event, both flags, this.mainSwitch and this.subSwitch should be set as falses but after I managed the touchstart, the boolean values set as false and true so the mousedown event can't use anymore.

Are there any ways to actual skip the event using boolean flags in javascript?

Answer 1

value of this.condition also this.condition2 is not being change in your events.

you only change the mainswitch and subswitch variable. it doesnt mean that you change those two will aso change the this.condition variable. because value of this is being set from initialization/contructor only

better change your this.condition object into a function to make it more dynamic. so it will always rely on your mainswitch and subswitch