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

onclick事件

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

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

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

  1. <script>  
  2.     module.exports = {  
  3.         data: {},//数据  
  4.         methods: {  
  5.             func_name: function(event) {   
  6.                 //点击事件触发  
  7.             }  
  8.         }  
  9.     };  
  10. </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模板绘制原生列表教程。 ### richtext布局控件 布局控件也支持监听点击事件，配置方式同上；但内部嵌套的子控件不支持监听onclick事件，用户点击内部控件时，会向上冒泡到父容器标签上，触发的onclick回调。 同普通控件的点击回调，的点击回调函数，自带一个event参数，通过event.detail可以访问当前NView模板中绑定的数据（即data对象）；另外，还可以通过event访问点击目标对象的属性（tagName、href、src），具体情况如下： 如果点击的是中的标签，则回调函数event参数中包含tagName（值为"a"）和href属性； 如果点击的是中的模板事件 - 图1标签，则回调函数event参数中包含tagName（值为"img"）和src属性； 如果点击的是中的其它区域或控件，则回调函数event参数中包含tagName（值为""） 如下是一个示例代码： html ![](https://ask.dcloud.net.cn/article/logo.png)</a>[ http://www.example.com ](http://www.example.com) module.exports = { methods: { handleRichText:function(e){ console.log(&#34;tagName:&#34; + e.tagName); console.log(&#34;href:&#34; + e.href); console.log(&#34;src:&#34; + e.src); } } }; ## 事件冒泡 NView模板中，点击事件默认会从子控件向父控件冒泡。 如下示例中，nview和button标签同时监听了点击事件，当用户点击button按钮时，会先弹框提醒“click button!”，然后点击事件向父容器冒泡，接着弹框提醒"click nview!"。 HTML 按钮 ![](https://ask.dcloud.net.cn/article/_www/img/demo.png) module.exports = { data: { //默认数据 }, init: function(url) { //动态初始化数据 }, methods: { clickNView:function(event){//nview点击事件触发 alert(&#34;click nview!&#34;); }, clickBtn:function(event){//按钮点击事件触发 alert(&#34;click button!&#34;); } } }; 如果想阻止事件冒泡，可以在子控件的点击函数增加return false语句，如下： HTML 按钮 ![](https://ask.dcloud.net.cn/article/_www/img/demo.png) module.exports = { data: { //默认数据 }, init: function(url) { //动态初始化数据 }, methods: { clickNView:function(event){//nview点击事件触发 alert(&#34;click nview!&#34;); }, clickBtn:function(event){//按钮点击事件触发 alert(&#34;click button!&#34;); 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属性设置。