What is the best way to programmatically change the event tied to an element's click

Question

What is the best way to programmatically change the event tied to an element's click

    <div id="filters"></div>

    <div id="available">
        <span class="badge badge-pill" onclick="addFilter()">Label</span>
    </div>


function addFilter(event) {
   document.getElementById("filters").appendChild(event.target);
   event.target.removeEventListener('click', addFilter);
   event.target.addEventListener('click', removeFilter);
}

function removeFilter(event) {
   document.getElementById("available").appendChild(event.target);
   event.target.removeEventListener('click', removeFilter);
   event.target.addEventListener('click', addFilter);
}

So, removeEventListener doesn't work is this case. Is there any way that I can accomplish to "toggle" the onclick event?

javascript vue.js vuejs2

Answer 1

Answer №1

Here's a demonstration with a single function. It validates whether the selected item in a list of HTMLCollection filters matches the clicked item using its innerText property. I included a second element with the same class to illustrate that the function works properly even when the text differs.

new Vue({
  el: "#app",
  data() {
    return {}
  },
  methods: {
    toggle_filter: function(event){  
      if([...this.$refs.filters.children].filter(child=>child.innerText==event.target.innerText).length==0){
        this.$refs.filters.appendChild(event.target)
      }else{
        this.$refs.available.appendChild(event.target)
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Filters</h2>
  <div ref="filters"></div>

<h2>Available</h2>
  <div ref="available">
    <span class="badge badge-pill" @click="toggle_filter">Label 1</span>
    <span class="badge badge-pill" @click="toggle_filter">Label 2</span>
  </div>
</div>

Answer 2

Here's a demonstration with a single function. It validates whether the selected item in a list of HTMLCollection filters matches the clicked item using its innerText property. I included a second element with the same class to illustrate that the function works properly even when the text differs.

new Vue({
  el: "#app",
  data() {
    return {}
  },
  methods: {
    toggle_filter: function(event){  
      if([...this.$refs.filters.children].filter(child=>child.innerText==event.target.innerText).length==0){
        this.$refs.filters.appendChild(event.target)
      }else{
        this.$refs.available.appendChild(event.target)
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Filters</h2>
  <div ref="filters"></div>

<h2>Available</h2>
  <div ref="available">
    <span class="badge badge-pill" @click="toggle_filter">Label 1</span>
    <span class="badge badge-pill" @click="toggle_filter">Label 2</span>
  </div>
</div>

What is the best way to programmatically change the event tied to an element's click

Answer №1

Similar questions

Centering navigation using HTML5

Error messages encountered following the latest update to the subsequent project

Cease the progress of a Sequelize promise within an Express.js application

What is the best way to transfer a variable from a node server to a javascript client when the page is first

wrap <td> data in a link with vue depending on certain conditions

Navigating through a predetermined list of HTML pages with next and previous options

Electron: Interactive menu customization

When Selenium in JavaScript cannot locate a button element, use `console.log("text")` instead

Ways to prevent horizontal scrolling in an image

A Guide to Effectively Extracting Data from Second Level JSON Arrays with

"Patience is key when it comes to waiting for an HTTP response

Extract string data from JSON payload

Command for DiscordJS to verify users

Modifying the array structure will deselect all individual <Input> elements that have been iterated

retrieve the value of a text form using jQuery and its corresponding id

Different approach to iterating through elements

Parsing nested JSON files to present data on a webpage

Extracting data from websites by manipulating the Document Object Model with the help of Javascript and Ajax

Parsing JSON data in JavaScript with multiple objects

Is it secure to use ES6 in Typescript with nodejs/koa?