uni-app 事件及事件绑定
<p><strong>事件修饰符</strong></p><ul>
<li>stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的catchEventName失效。</li>
<li>prevent 可以直接干掉，因为uni-app里没有什么默认事件，比如submit并不会跳转页面。</li>
<li>self 没有可以判断的标识</li>
<li>once 也不能做，因为uni-app没有removeEventlistener,虽然可以直接在handleProxy中处理，但非常的不优雅，违背了原意，暂不考虑</li>
<li>按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持修饰符。</li>
</ul>
<p><strong>事件绑定 @click</strong></p>
<div class="cnblogs_code">
<pre><template>
<view>
<view class="demo" @click="clickTest" @longtap="longtap">
</view>
</view>
</template>
<script>
<span style="color: rgba(0, 0, 255, 1)">var</span><span style="color: rgba(0, 0, 0, 1)"> _self;
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)">{
data(){
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">{
}
},
onLoad() {
_self</span>=<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">;
},
methods:{
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">点击事件</span>
clickTest:<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(e){
console.log(</span>'click'<span style="color: rgba(0, 0, 0, 1)">);
},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">长安事件</span>
longtap:<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(e){
console.log(</span>'longtap'<span style="color: rgba(0, 0, 0, 1)">);
}
}
}
</span></script>
<style><span style="color: rgba(0, 0, 0, 1)">
.demo{
width: 600px;
height: 600px;
background: #8F8F94;
}
</span></style></pre>
</div>
<p><strong>事件传参（动态参数）：e.target.id</strong></p>
<div class="cnblogs_code">
<pre><template>
<view>
<<span style="color: rgba(0, 0, 0, 1)">view
v</span>-<span style="color: rgba(0, 0, 255, 1)">for</span>="(item,index) in students"<span style="color: rgba(0, 0, 0, 1)">
class</span>="persons"<span style="color: rgba(0, 0, 0, 1)">
@click</span>="menuClick"<span style="color: rgba(0, 0, 0, 1)">
v</span>-bind:id="index"
><span style="color: rgba(0, 0, 0, 1)">
{{index}}</span>----<span style="color: rgba(0, 0, 0, 1)">{{item.name}}
</span></view>
</view>
</template>
<script>
<span style="color: rgba(0, 0, 255, 1)">var</span><span style="color: rgba(0, 0, 0, 1)"> _self;
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)">{
data(){
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">{
students:[
{name:</span>"张三"<span style="color: rgba(0, 0, 0, 1)">},
{name:</span>"李四"<span style="color: rgba(0, 0, 0, 1)">}
]
}
},
onLoad() {
_self</span>=<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">;
},
methods:{
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">点击事件</span>
menuClick:<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(e){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取参数id值</span>
<span style="color: rgba(0, 0, 0, 1)"> console.log(e.target.id);
},
}
}
</span></script>
<style><span style="color: rgba(0, 0, 0, 1)">
.demo{
width: 600px;
height: 600px;
background: #8F8F94;
}
</span></style></pre>
</div>
<p> </p>
<p><strong><img src="https://img2020.cnblogs.com/blog/2259678/202102/2259678-20210206110442625-725701085.png"></strong></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/ckfuture/p/14380912.html
頁:
[1]