对html文件中dom元素设置监听遇到的问题

1.使用builder提供的mui框架制作app,对dom元素使用onclick单击监听是无效的。使用 tap 代替click。
2.在使用.on()方法实现批量元素的事件绑定时:
.on( event , selector , handler )
event
Type: String
需监听的事件名称,例如:’tap’
selector
Type: String
选择器
handler
Type: Function( Event event )
事件触发时的回调函数,通过回调中的event参数可以获得事件详情
官网提供例子:

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
  //获取id
  var id = this.getAttribute("id");
  //传值给详情页面,通知加载新数据
  mui.fire(detail,'getDetail',{id:id});
  //打开新闻详情
  mui.openWindow({
    id:'detail',
    url:'detail.html'
  });
})

我个人在使用类名选择器时,错用类名,比如某个按钮样式class = ‘mui-btn mui-btn-warning’ 我错用‘.mui-btn mui-btn-warning’作为了on方法中的selector ,而正确写法只能写一个class名称,不允许有空格。这一点我需要记住。

项目中我有一段代码:

html += "<a class='mui-btn mui-btn-warning' id='" +           val['doctorid'] + "&" + val['clinicid'] + "'>" +
"<span class='fa fa-hospital-o'></span>" +s['servicename'] +"</a>";

这是一个动态追加的dom,是遍历添加多个,对此批量添加监听:

mui(".mui-table-view").on('tap','mui-btn-warning',function(){
var id = this.id;
var ids = id.split("&");
var doctorId = ids[0];
var clinicId = ids[1];
                        plus.webview.close("clinicAppointment.html");
                        var clinicApp = plus.webview.create("clinicAppointment.html", "clinicAppointment.html");
    //传值给详情页面,通知加载新数据
    mui.fire(clinicApp, 'getDetail', {
        doctorId: doctorId,
        clinicId: clinicId
    });
});

3. mui("#list").off("tap"); //取消tap监听
  页面dom元素多次加载后,dom元素也能多次被tap监听到;为避免重复被监听,可在加载之前取消监听事件。
.off( event , selector , handler )
event
Type: String
需取消绑定的事件名称,例如:'tap'
selector
Type: String
选择器
handler
Type: Function
之前绑定到该元素上的事件函数,不支持匿名函数
version added: 2.0.0 .off( event , selector)
event
Type: String
需取消绑定的事件名称,例如:'tap'
selector
Type: String
选择器
version added: 2.2.0 .off( event )
event
Type: String
需取消绑定的事件名称,例如:'tap'
version added: 2.2.0 .off( )
空参数,删除该元素上所有事件

mui(“#list”).off(“tap”,”li”,foo_1);
//点击li时,foo_2、foo_2两个函数均不再执行
mui(“#list”).off(“tap”,”li”);
//点击li时,不再执行foo_1函数;点击p时,也不再执行foo_3函数
mui(“#list”).off(“tap”);
//点击li时,不再执行foo_1函数;点击p时,也不再执行foo_3函数;双击li时,也不再执行foo_4函数;
mui(“#list”).off();
“`

4.dom元素在加载完成之后方能成功完成监听。在添加监听事件代码需考虑到这一点

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值