trigger - event

by redky

HTML

<div class="box">
    <div class="inner"></div>
</div>

CSS

.inner {
    height: 200px;
    width: 200px;
    /* 假设使用 background-image */
    /* 这里使用 border-raidus 和 Background-color 模拟 */
    border-radius: 200px;
    background-color: #ffa;
}

.box {
    background-color: #eee;
    float: left;
}

JavaScript

/* 
    需求: 点击到 .inner 位置时, 才触发事件. 
    注: .inner 是辅助元素. 认为它对于 JavaScript 来说不可见 
*/
var box = document.querySelector( '.box' );
var style = document.defaultView.getComputedStyle( box, null );
var o = [ parseFloat(style.width)/2, parseFloat(style.height)/2 ];
var radius = 100;
box.onclick = function(e) {
    // 计算两点之间距离.
    var x = e.offsetX, y = e.offsetY;
    var r = Math.sqrt( Math.pow( (o[0] - x), 2 ) +  Math.pow(  o[1] - y, 2 ) );
    if ( r <= radius ) {
        alert( 'trigger event' );
    }
};


/*
    event 中和位置相关属性.
    x, y
    screenX, screenY - 屏幕
    pageX, pageY - 文档
    offsetX, offsetY - 元素
    layerX, layerY
    clientX, clientY - browser
*/