鼠标Event事件

2018-06-22

Event对象、获取Dom元素显示tips

鼠标Event对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

event.currentTarget和event.target的区别 参考资料

事件捕获层上有多个节点，单击时，得到的currentTarget是设定的捕获层节点（事件绑定的元素），而target则是实际被单击的节点，
实际被单击的节点通常位于currentTarget之内的子节点或是其本身

event对象screenX、clientX 、pageX区别。参考资料

获取dom元素的位置信息

getBoundingClientRect方法用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗window的位置。返回的是一个对象，该对象有四个属性：top，left，right，bottom；该方法原本是IE Only的，但是FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率有很大的提高。另外，该方法避免使用while循环，而是直接获取数值来实现，比第一种方法性能要好，特别是在复杂的页面上更为明显。
参考资料

鼠标滑过显示tip提示框

常规dom结构标签，生成常规标签

function MyOnMouseOver(event, hint, mytimr) {
    $("#svgtips").css({ "display": "block", "top": $(event.currentTarget).offset().top + event.currentTarget.getBoundingClientRect().height, "left": $(event.currentTarget).offset().left + event.currentTarget.getBoundingClientRect().width });
}
function MyOnMouseOut() {
    $("#svgtips").css("display", "none");
    $("#svgtips").html("");
}

结合svg，在svg内部生成svg的标签

function ShuZiLiang_MouseOver(event) {
    if (event.target.parentNode.getAttribute('hint')) {
        //如果配置了hint的描述值
        if (document.getElementById('svgtip_box')) {
            //页面已经存在提示框
            document.getElementById('svgtip_box').style.display = 'block';
            var _obj = document.getElementById('svgtip_box').getElementsByTagName('text');
            _obj[0].setAttribute('x', event.target.getBBox().x);
            _obj[0].setAttribute('y', event.target.getBBox().y);
            _obj[0].textContent = event.target.parentNode.getAttribute('hint');
        } else {
            var _tip = document.createElementNS("http://www.w3.org/2000/svg", "g");
            _tip.setAttribute('id', 'svgtip_box');
            _tip.setAttribute('transform', event.target.parentNode.getAttribute('transform'));
            var _tipText = document.createElementNS("http://www.w3.org/2000/svg", "text");
            _tipText.textContent = event.target.parentNode.getAttribute('hint');
            _tipText.setAttribute('x', event.target.getBBox().x);
            _tipText.setAttribute('y', event.target.getBBox().y);
            _tipText.setAttribute('fill', '#555');
            _tipText.style.fontSize = '16px';
            _tip.appendChild(_tipText);
            console.log(_tipText);
            console.log(event.target.ownerDocument.getElementsByTagName("svg")[0]);
            console.log(_tip);
            //event.target.ownerDocument.rootElement.appendChild(_tip);
            if (event.target.ownerDocument.getElementsByTagName("svg")[0]) {
                event.target.ownerDocument.getElementsByTagName("svg")[0].appendChild(_tip);
            }
            
        }
    }
}

function ShuZiLiang_MouseOut(event) {
    if (document.getElementById('svgtip_box')) {
        $("#svgtip_box").remove();
        //$("#svgtip_box").css("display", "none");
        //document.getElementById('tip_box').parentNode.removeChild(document.getElementById('tip_box'));
        //event.target.ownerDocument.getElementsByTagName("svg")[0].removeChild(document.getElementById('tip_box'));
    }
}