模板事件 - NView模板 - wap2app教程

分类：wap2app

wap2app 点击事件 NView模板

onclick事件

在NView模板中，很多控件都可以通过onclick属性配置控件的点击事件，配置方式如下：

<element onclick={this.func_name}></element>

func_name是一个函数，需要在节点下的methods中声明，示例如下：

<script>  
    module.exports = {  
        data: {},//数据  
        methods: {  
            func_name: function(event) {   
                //点击事件触发  
            }  
        }  
    };  
</script>

点击事件的回调函数自带一个event参数，通过event.detail可以访问当前NView模板中绑定的数据（即data对象），如下是一个完整示例，点击按钮，打印当前的产品名称和版本号：

<template>  
    <nviews cachemaxage="86400">  
        <nview style="height:100px">  
            <canvas>  
                <button onclick={this.clickBtn}>按钮</button>  
            </canvas>  
        </nview>  
    </nviews>  
</template>  
<script>  
    module.exports = {  
        data: {  
            name: "wap2app",  
            version: "1.0.0"  
        },  
        methods: {  
            clickBtn: function(event) { //按钮点击事件触发  
                var data = event.detail;  
                console.log("name:" + data.name + ",version:" + data.version);  
            }  
        }  
    };  
</script>

NView模板中，列表组件（）和流式布局控件（）的点击事件相对特殊，下文分别介绍。

list组件

标签的onclick点击事件同上，但列表项的点击事件相对特殊，如果列表项是通过n-for指令循环渲染的，则在点击回调函数中，除了event参数外，还有item、index两个参数，分别表示当前列表项的数据及列表项索引，详细参考[NView模板绘制原生列表教程](http://ask.dcloud.net.cn/article/12803)。 ### richtext布局控件布局控件也支持监听点击事件，配置方式同上；但内部嵌套的子控件不支持监听onclick事件，用户点击内部控件时，会向上冒泡到父容器标签上，触发的onclick回调。同普通控件的点击回调，的点击回调函数，自带一个event参数，通过event.detail可以访问当前NView模板中绑定的数据（即data对象）；另外，还可以通过event访问点击目标对象的属性（tagName、href、src），具体情况如下： * 如果点击的是中的标签，则回调函数event参数中包含tagName（值为"a"）和href属性； * 如果点击的是中的标签，则回调函数event参数中包含tagName（值为"img"）和src属性； * 如果点击的是中的其它区域或控件，则回调函数event参数中包含tagName（值为""）如下是一个示例代码： ```html

http://www.example.com module.exports = { methods: { handleRichText:function(e){ console.log("tagName:" + e.tagName); console.log("href:" + e.href); console.log("src:" + e.src); } } }; ``` ## 事件冒泡 NView模板中，点击事件默认会从子控件向父控件冒泡。如下示例中，nview和button标签同时监听了点击事件，当用户点击button按钮时，会先弹框提醒“click button!”，然后点击事件向父容器冒泡，接着弹框提醒"click nview!"。 ```HTML 按钮

module.exports = { data: { //默认数据 }, init: function(url) { //动态初始化数据 }, methods: { clickNView:function(event){//nview点击事件触发 alert("click nview!"); }, clickBtn:function(event){//按钮点击事件触发 alert("click button!"); } } }; ``` 如果想阻止事件冒泡，可以在子控件的点击函数增加return false语句，如下： ```HTML 按钮

module.exports = { data: { //默认数据 }, init: function(url) { //动态初始化数据 }, methods: { clickNView:function(event){//nview点击事件触发 alert("click nview!"); }, clickBtn:function(event){//按钮点击事件触发 alert("click button!"); return false;//阻止事件冒泡 } } }; ``` 阻止事件冒泡后，用户再次点击button按钮，则会弹框提醒“click button!”，不会再弹框提醒"click nview!"。 ## 事件拦截 subNView作为webview的一个子控件，覆盖在webview上方，当用户点击subNView控件时，subNView默认会拦截touch事件，不会将touch事件透传给下层的webview中的DOM元素。 wap2app支持通过设置nview标签的intercept属性配置touch事件是否拦截，默认为true，即拦截touch事件，下层webview中的DOM元素无法触发touch事件；如果设置为false，则不拦截touch事件，下层webview中的DOM元素将接收到用户的touch事件，从而触发原来HTML页面的touch事件逻辑。如下示例代码中，nview1设置了不拦截touch事件，则在nview1区域点击时，都会透传给下方的webview页面中的DOM元素，触发DOM元素的点击事件. ```HTML ... module.exports = { }; ``` **Tips**：仅nview标签支持intercept属性设置。

4 赞关注分享