Mouse over event functioning, however click event remains inactive

Question

Mouse over event functioning, however click event remains inactive

I'm currently working on a project using Vue JS and I've encountered an issue.

Here is the code snippet causing me trouble:

<input v-model="spam" @keyup="spamegg=true;" @blur="spamegg=false;" />
<div v-if="spamegg" class="someclass">
    <a v-for="str in arr" @click.prevent="foobar(); barbaz();" href="#">{{ str }}</a>
</div>

Although I have defined foobar method as:

foobar: function() {
    console.log('clicked');
}

The click event doesn't seem to be triggering. The same issue persists with the barbaz function.

Coincidentally, when I tested it with the @mouseover event, it worked fine.

For reference, the div element behaves like a dropdown in terms of CSS styling.

If you require any additional information, please feel free to ask.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

After attempting your example in jsfiddle, I noticed a mistake in the @blur handler where spmaegg was used instead of spamegg. Even after fixing this issue, the click events were still not registering properly. It appears that removing the blur event allows the events to register as intended. This could be due to the timing of the blur event on mousedown conflicting with the click event firing after mouseup, causing the div containing the links to disappear before being fully clicked. Perhaps a new approach is needed for the dropdown functionality, such as implementing a container around the input element and link list to handle the blur event separately, ensuring that clicking within the link list does not trigger the blur effect.

Here is a link to my fiddle without the blur handling, demonstrating proper console output: https://jsfiddle.net/L1khuca2/

Answer 2

After attempting your example in jsfiddle, I noticed a mistake in the @blur handler where spmaegg was used instead of spamegg. Even after fixing this issue, the click events were still not registering properly. It appears that removing the blur event allows the events to register as intended. This could be due to the timing of the blur event on mousedown conflicting with the click event firing after mouseup, causing the div containing the links to disappear before being fully clicked. Perhaps a new approach is needed for the dropdown functionality, such as implementing a container around the input element and link list to handle the blur event separately, ensuring that clicking within the link list does not trigger the blur effect.

Here is a link to my fiddle without the blur handling, demonstrating proper console output: https://jsfiddle.net/L1khuca2/

Answer 3

Answer №2

When considering implementing a dropdown feature, my suggestion is to hide the div upon clicking a link, while also adding the text value of the link to the input field. Additionally, it would be advisable to remove the @blur event from the code:

new Vue({
  el: '#app',
  data: {
    spam: '',
    spamegg: false,
    arr: ["aaa", "bbb", "ccc"]
  },
  methods: {
    foobar: function(str) {
      console.log('clicked');
      this.spam = str;
      // this.spamegg = false;
    },
    barbaz() {
      console.log('bar');
    }
  }

})

body {
  height: 500px;
  width: 100%;
  display: flex;
  padding: 10px;
  flex-direction: column
}

#app {
  background: #725585;
  height: 100%;
  width: 100%;
  padding: 20px
}

.someclass {
  display: flex;
  flex-direction: column
}

a {}

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app" @click.stop="spamegg = false;">
    <input v-model="spam" @keyup="spamegg=true;" />

    <div v-if="spamegg" class="someclass">
      <a v-for="str in arr" @click.prevent="foobar(str); barbaz();" href="#">{{ str }}</a>
    </div>
  </div>

Answer 4

When considering implementing a dropdown feature, my suggestion is to hide the div upon clicking a link, while also adding the text value of the link to the input field. Additionally, it would be advisable to remove the @blur event from the code:

new Vue({
  el: '#app',
  data: {
    spam: '',
    spamegg: false,
    arr: ["aaa", "bbb", "ccc"]
  },
  methods: {
    foobar: function(str) {
      console.log('clicked');
      this.spam = str;
      // this.spamegg = false;
    },
    barbaz() {
      console.log('bar');
    }
  }

})

body {
  height: 500px;
  width: 100%;
  display: flex;
  padding: 10px;
  flex-direction: column
}

#app {
  background: #725585;
  height: 100%;
  width: 100%;
  padding: 20px
}

.someclass {
  display: flex;
  flex-direction: column
}

a {}

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app" @click.stop="spamegg = false;">
    <input v-model="spam" @keyup="spamegg=true;" />

    <div v-if="spamegg" class="someclass">
      <a v-for="str in arr" @click.prevent="foobar(str); barbaz();" href="#">{{ str }}</a>
    </div>
  </div>

Mouse over event functioning, however click event remains inactive

Answer №1

Answer №2

Similar questions

Creating JQuery UI Tabs using dynamically generated DIV elements

Combining AngularJS with ng file upload and Sails JS for seamless file uploading

I am currently having issues with the mustache syntax in vuejs, as it is not functioning properly

Updating DOM elements in AngularJS based on search results and user clicks

What is the proper way to preload a set of objects in a list or array in NextJS?

Failure to pass a variable declared within a function to another JavaScript file running simultaneously

Leveraging jQuery to extract numerous concealed data from a webpage based on their names

Retrieving user email with Vue.js from Firebase

Utilizing the Bing Translation API to translate an entire webpage

Utilize Sass @extend to incorporate imported CSS files in the build process

jQuery scrollTop animates to the start of the webpage

Discover similarities between two arrays

Obtaining only a portion of the text when copying and editing it

Activating/Deactivating Drop-down Menus Depending on Selected Options

Troubleshooting a Recursive Menu Problem in Vue.js

Sudden slowdown due to Jquery error

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

Unable to reach props during mounted lifecycle stage

display a container and navigate to the specific link

A TypeScript example showcasing a nested for-of loop within several other for loops