Youba
January 22, 2019, 8:20pm
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
plpl
January 22, 2019, 9:52pm
2
<a @mousedown="methodName('desktop')" @touchstart="methodName('mobile')"></a>
1 Like
Youba
January 22, 2019, 10:18pm
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?
plpl
January 22, 2019, 10:28pm
4
did not get your question
Youba
January 22, 2019, 10:39pm
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
plpl
January 22, 2019, 10:43pm
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
Youba
January 22, 2019, 10:45pm
7
I only have those two methods, so i guess that the reason
Youba
January 22, 2019, 10:52pm
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
plpl
January 22, 2019, 10:55pm
9
i see
you right
probably it can be done with css
let me see
plpl
January 22, 2019, 11:01pm
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')
}
}
}
}
Youba
January 22, 2019, 11:07pm
11
Ok thanks a lot for your help, and it worked with preventDefault()
too:
touchEnd:function(e){
e.preventDefault();
console.log('touchEnd')
}