So. to begin with, I am writing my eventlisteners in this way.

document.addEventListener('click',(e)=>{
  const element = e.target;
  if(element.classList.contains('classOne'){
    fire_function_one();
  }
  if(element.classList.contains('classTwo'){
    fire_function_two();
  }
});

I have a div like follows

<div class='classOne classTwo'>Something</div>

So what I want to achieve is, When our div has classOne, I want to fire 'fire_function_one()', However when our div has both classOne and ClassTwo, I want to fire 'fire_function_two()' but I dont want to run 'fire_function_one()'.

What I have tried,

1. event.stopPropogation; //Not working
2. event.preventDefault; //Not working

if(element.classList.contains('classTwo' && !element.classList.contains('classOne'){
  fire_function_two();
  //Doesnt acheive what I want
}

CodePudding user response：

Change the Order of your condition and use else if statement.

document.addEventListener('click',(e)=>{
  const element = e.target;
 
  if(element.classList.contains('classTwo'){
    fire_function_two();
  }
  else if(element.classList.contains('classOne'){
    fire_function_one();
  }
});

CodePudding user response：

If you are sure that the element can have classOne or both classTwo and classOne, you can just change the order and use else if statement:

document.addEventListener('click',(e)=>{
  const element = e.target;
  if(element.classList.contains('classTwo'){
    fire_function_two();
  } else if(element.classList.contains('classOne'){
    fire_function_one();
  }
});

CodePudding user response：

You need to write click on element as below.

var eleOne = document.getElementsByClassName('classOne')
if(eleOne.length > 0) {
    var currentEleOne = eleOne[0];
    currentEleOne.onclick = function () {
        // Click code for classOne
    }
}

var eleTwo = document.getElementsByClassName('classTwo')
if(eleTwo.length > 0) {
    var currentEleTwo = eleTwo[0];
    currentEleTwo.onclick = function () {
        // Click code for classTwo
    }
}

CodePudding user response：

Here you have two cases,

• When both classes are present, fire only class two
• If only class one is present, fire class one

So, First check with if whether both classes are present or not. If true then fire class two. Otherwise inside else if, check if class one is present and if this condition is met, fire class one.

document.addEventListener('click', function(e) {
  const element = e.target;

  if (element.classList.contains('classTwo')) {
    console.log("Fire class two");
  } else if (element.classList.contains('classOne')) {
    console.log("Fire class one");
  }
});

<div class='classOne classTwo'>Something 1 2</div>

<div class='classOne'>Something 1</div>

CodePudding user response：

You could try a simple ternary like this:

document.addEventListener('click', (e) => {
  const element = e.target;
  element.classList.contains('classTwo') ? fire_function_two() : fire_function_one();
});

If the classList contains 'classTwo' then run fire_function_two() else fire_function_one()