小摘记

js获取页面宽度高度及屏幕分辨率

网页可见区域宽：document.body.clientWidth 

网页可见区域高：document.body.clientHeight 
网页可见区域宽：document.body.offsetWidth (包括边线的宽) 
网页可见区域高：document.body.offsetHeight (包括边线的宽) 
网页正文全文宽：document.body.scrollWidth 
网页正文全文高：document.body.scrollHeight 
网页被卷去的高：document.body.scrollTop 
网页被卷去的左：document.body.scrollLeft 
网页正文部分上：window.screenTop 
网页正文部分左：window.screenLeft 
屏幕分辨率的高：window.screen.height 
屏幕分辨率的宽：window.screen.width 
屏幕可用工作区高度：window.screen.availHeight 

屏幕可用工作区宽度：window.screen.availWidth

Click binding

The click binding will attach a method of the View-Model to the click DOM event of the target element. The methods will be invoked when the user clicks the target DOM element.

<div id="view">
<span data-bind="click: showDescription">Show description</span>
<span data-bind="visible: isDescriptionShown, text: description"></span>

<script>
var viewModel = kendo.observable({
    description: "Description",
    isDescriptionShown: false,
    showDescription: function(e) {
        // show the span by setting isDescriptionShown to true
        this.set("isDescriptionShown", true);
    }
});

kendo.bind($("#view"), viewModel);
</script>
 </div>

The click binding is a shorthand for the events binding. The following code snippets are equivalent:

<span data-bind="click: clickHandler"></span>

<span data-bind="events: { click: clickHandler }"></span>

Accessing the DOM event argument

Kendo MVVM supplies the DOM event argument wrapped in a jQuery Event object.

Stopping DOM event bubbling

To stop the event from bubbling up the DOM tree use the stopPropagation method.

Stop event bubbling

<span data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
    click: function(e) {
        e.stopPropagation();
    }
});

kendo.bind($("span"), viewModel);
</script>

Preventing the default action of the DOM event

For some DOM elements the click event has a default action - for example navigate to another page or submit a form. To prevent the default action use the preventDefault method.

Prevent default event action

<a href="http://example.com" data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
    click: function(e) {
        // stop the browser from navigating to http://example.com
        e.preventDefault();
    }
});

kendo.bind($("a"), viewModel);
</script>