[SOLVED] Call a method onmousedown

1

When we want to call a method onclick we call it this way @click="methodName", how can i call a method with onmousedown, i didn’t find anything like @onmousedown="methodName".
This is my code:

<template>
    <div>
        <button onmousedown="startRecording(this)" onmouseup="stopRecording(this)" > Start Recording </button>
        <button @click="methodPlay"> Play </button>
    </div>
</template>
<script>
    return {
        methods: {
            startRecording: function(obj) {
                .
                .
                .
                mediaRec.startRecord();
                obj.style.backgroundColor = "#1ec5e5";
                obj.innerHTML = "Recording ....";
            },
            stopRecording: function(obj) {
                .
                .
                .
                mediaRec.stopRecord();
                obj.style.backgroundColor = "#ddd";
                obj.innerHTML = "Start Recording";
            },
            methodPlay: function() {
                // play
            }
        }
    };
</script>

Basically what i’m looking for is to start recording audio when i tap and hold the button, and stop recording when i let it go.
so i tried to do that this way https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mousedown

2 
<a @mousedown="methodName('desktop')" @touchstart="methodName('mobile')"></a>
1 Like
3

It’s working, but i had a problem with mobile, when i tap and hold it gives me the select text of the link, how can i prevent that?

4

did not get your question

5

<button @touchstart=“startRecording” @touchstart=“stopRecording” > Start Recording </button>

On mobile: when i tap and hold the button, the startRecording method runs, when i let it go the stopRecording method runs. this is what it should happen.
But when in reality (on Mobile), when i tap and hold the button, the startRecording method runs, but the button text got SELECTED, so when i let the button, the stopRecording method doesn’t run, because the button text got selected and are waiting for copy or something.
It’s like it ignore the touchstart and stopRecording and the OS gives the priority to the user may want to select the text inside the button, you know what i mean

6 
var app = new Framework7({
  root:'#app',
  touch:{
    disableContextMenu:true
  }
});

will prevent any “selected” thing in your (all) app

but you need to check if that is the (real) reason

7

I only have those two methods, so i guess that the reason

8

i tried

var app = new Framework7({
  root:'#app',
  touch:{
    disableContextMenu:true
  }
});

but it didn’t work, after tap and hold, the text inside the button got selected

9

i see
you right

probably it can be done with css
let me see

10 
{
  path:'/some-page/',
  component:{
    template:`
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">{{title}}</div>
          </div>
        </div>
        <div class="page-content">
          <div class="block text-align-center">
            <a class="my-class" 
               @touchstart="touchStart" @touchend="touchEnd">touch</a>
          </div>
        </div>
      </div>
    `,
    style: `
      .my-class {
        font-size: 30px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
    `,
    data:function(){
      return {
        title:'touch'
      }
    },
    methods:{
      touchStart:function(e){
        console.log('touchStart')
      },
      touchEnd:function(e){
        console.log('touchEnd')
      }
    }
  }
}
11

Ok thanks a lot for your help, and it worked with preventDefault() too:

touchEnd:function(e){
    e.preventDefault();
    console.log('touchEnd')
}