knockout click点击事件及事件源解释

绑定click点击事件示例

<body>you've clicked<span data-bind="text:number"></span><button data-bind="click:count">Click Me</button>
</body>
<script type="text/javascript">var viewModel={number:ko.observable(0),count:function(){var preCount=this.number();this.number(preCount+1);}};ko.applyBindings(viewModel);
</script>

结果

you’ve clicked 0
Click Me
当点击Click Me 的时候(you’ve clicked 0) 0会加1，无限叠加

事件源：( event )

在事件中，当前操作的那个元素就是事件源。比如网页元素中a标签和input都有onclick事件，当点击a发生onclick事件时，事件源就是a标签，当点击input发送onclic事件是，事件源就是input.

有些情况，你可能需要使用事件源对象，Knockout会将这个对象传递到你函数的第一个参数：

<button data-bind="click: myFunction">Click me
</button>
<script type="text/javascript">var viewModel = {//knockout默认是将源事件作为函数的第一个参数，你可以在button中不传event这个参数myFunction: function(event) {if (event.shiftKey) {} else {} }};</script>

如何获取事件对象那？？
var e = event || window.event;这句话就是定义了一个变量来获取事件对象，因为不同的浏览器获取事件对象的方法有点不太一样，IE下是window.event，标准下是event，为了兼容所以写了event || window.event.

允许执行默认事件

//如果绑定了click事件后，默认事件为点击事件href的时间将不会触发
<a href="http://www.baidu.com" data-bind="click:myFunction" taget="_blank">Baidu</a><script type="text/javascript">var viewModel = {//当点击A标签时会执行这个函数，然后结束，不会进行跳转myFunction: function() {alert("OK");}};
</script>//解决办法
<a href="http://www.baidu.com" data-bind="click:myFunction" taget="_blank">Baidu</a><script type="text/javascript">var viewModel = {//当点击A标签时会执行这个函数后在进行跳转myFunction: function() {alert("OK");return true;}};
</script>

更多click事件请点击这里

knockout click点击事件及事件源解释相关推荐

js blur失焦事件与click点击事件冲突
场景:输入框绑定blur失焦事件,focus后点击按钮,触发了输入框的blur事件,但是按钮点击事件没有触发. 原因:blur失焦事件的优先级比click点击事件高. 解决方法: 1.都触发 blur ...
uniapp 真机调试 click点击事件无效
问题分析: (网络上普遍答案,但不能确定是否是这个原因导致) 移动端的主要问题是click会有200-300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的3 ...
layui lay-active 实现button click点击事件
layui lay-active 实现button click点击事件已有的解决方案 1. js实现 2. jQuery实现 lay-active实现传递参数已有的解决方案 1. js实现 HT ...
ECharts 全局触发click点击事件（Label及柱状）
// 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')); 前言需 ...
iOS Safari 中click点击事件失效的解决办法
转载自:https://www.cnblogs.com/Steping/p/5737547.html 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效 ...
Html点击按钮时修改某个标签的 click点击事件
解决的问题:当图片点击时给另外一个div里面的li标签赋予点击事件主要核心代码 $(".delMember").attr('onclick', '').unbind('cli ...
click事件在什么时候出发_剖析setTimeout和click点击事件的触发顺序
下面是一段非常简单的JavaScript代码 dianji setTimeout(function () { alert('timer handler') }, 2000) function test ...
阻止click点击事件
网上查了后有一下几种实现方法 1.css禁用鼠标点击事件 .disabled { pointer-events: none; } 注:(这个没有试过) 2.直接使用阻止事件的进行 e.stopProp ...
select 触发click点击事件
问题描述: 有时需要在点击select的时候就需要做一些逻辑判断,那么就需要触发select 的click事件,注意不是点开select后点击option的实践.我试了下原本的一些事件都不能触发cli ...

knockout click点击事件及事件源解释

knockout click点击事件及事件源解释相关推荐

最新文章

热门文章