function viewModelDemo4(){
var self =this;
self.allowJump=ko.observable(false);
self.myFunction=function(data, event) {
alert("这是自定义事件");
return self.allowJump();
};
self.tagText=ko.computed(function(){
return self.allowJump()?"我是a标签,现在点击我可以跳转了":"我是a标签,有href,但是点击我不会跳转";
},this);
};
ko.applyBindings(new viewModelDemo4() ,document.getElementById("Demo4"));
<h1>演示 KnockOut click绑定 功能</h1>
<hr />
<ul>
<li class="Point">
4、<b class="PointTitle">click绑定与<span class="KeyWord">默认元素点击事件</span></b><br />
<ul class="PointDesc">
<li>click绑定了处理函数之后,KO默认的会阻止元素原本的点击事件执行,比如a标签的跳转</li>
<li>如果你确实想要恢复元素原来的点击行为,只需要在绑定的处理函数最后return true即可</li>
</ul>
<div class="PointDemo" id="Demo4">
<a href="http://www.baidu.com" data-bind="click: myFunction,text:tagText">
</a><br>
<label><input type="checkbox" data-bind="checked: allowJump" /> 勾中支持跳转</label>
</div>
<div class="PSFrame">
KO默认的行为是阻止元素默认的后续动作,这个是比较合理的,一般开发人员使用click事件都是想自定义处理<br>
如果需要回复其默认行为,在处理函数中返回true即可
</div>
<hr />
</li>
</ul>
/*Demo�ļ���ʽ*/
body
{
background-color: #e3e5d4;
}
/* ֪ʶ�� */
.Point
{
margin: 20px,0,0,0;
}
/* ֪ʶ����� */
.PointTitle
{
color:#0d8d0d;
}
/* �ؼ��� */
.KeyWord
{
color:Red;
}
/* ֪ʶ������ */
.PointDesc
{
font-family: Arial;
font-size: 15px;
color:#09acb8;
}
.PointDesc li
{
margin: 10px,0,0,0;
}
/* ֪ʶ��Demo��� */
.PointDemo
{
border-style:double;
border-color:#dcd559;
min-height:100px;
font-family: Corbel;
font-size: 20px;
color: #00174f;
}
/* ��Ҫ������ʾ����Ϣ��� */
.PSFrame
{
border-style: dashed;
border-color:#78e6ef;
font-family: Corbel;
font-size: 20px;
font-style:italic;
color: #b86c00;
}
/* ������ʾ */
.error {
color:Red;
}
/* ********************************************************** */
/*��Ҫǿ������ʽ*/
.Notice
{
font-weight: bold;
font-family:Bodoni MT Black;
color: #cd0707;
}
/* ********************************************************** */
/*�������ʽ*/
input[type="text"]
{
min-width:250px;
}
select
{
min-width:400px;
}
External resources loaded into this fiddle: