Js实现鼠标右键选择的元素属性读取

htmljqueryjs

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload=function()
    {
    var aObj=document.getElementsByTagName('span');
    for(var i=0;i<aObj.length;i++)
    {
    aObj[i].oncontextmenu=function()
    {
    if(this.getAttribute('title'))
    {
    alert(this.getAttribute('title'));
    }
    return false;
    }
    }
    document.oncontextmenu=function(){
    return false;
    }
    }
    </script>
    </head>
     
    <body>
        <p id="test1" title="1">11111111111111111111</p>
            <span title="aaaa">aaaaaaaaaaaaaaaaaaaaaaa</span>
            <span id="test3">sadf23423411</span>
            <span title="ddd">ddddddddddddddddddddddddddddd</p>
    </body>
    </html>
      

  2.   

    <html>
       <head>
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
       </head>
    <script type="text/javascript">
    $(function(){
    $('#aaaa').mousedown(function(e){
    if(3 == e.which){//鼠标右击
    if($(this).attr('title')){
    alert($(this).attr('title'))
    }

    }
    })
    $('#test3').mousedown(function(e){
    if(3 == e.which){//鼠标右击
    alert($(this).attr('title'))
    }
    })
    })
    </script>
       <body>
            <p id="test1" title="1">11111111111111111111</p>
            <span  title='aaaa' id='aaaa'>aaaaaaaaaaaaaaaaaaaaaaa</span>
            <span id="test3">sadf23423411</span>
            <span title="ddd">ddddddddddddddddddddddddddddd</sapn>
       </body>
    </html>
      

  3.   

    document.oncontextmenu=function(e){
             var target = e.target
             if(target.nodeName=='SPAN'){
             if(target.getAttribute('title'))
                    {
                        alert(target.getAttribute('title'));
                    }
             }                
                return false;
            }
      

  4.   

    非常感激几位。不过alert提示可否改成在元素附近显示的浮动提示信息 。
    我试着改了下 
      var viewer = document.createElement("div");
      viewer.innerHtml=this.getAttribute('title');
      viewer.style.display = "block";好像有问题。初涉js，谢谢各位。
      

  5.   

    才发现 <span title="ddd">ddddddddddddddddddddddddddddd</p> 结束标记什么的写错误 。
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    .alert{position:absolute;width:50px;height:30px;line-height:30px;background:#ccc; text-align:center;}
    </style>
    <script>
    window.onload=function()
    {
    var aObj=document.getElementsByTagName('span');
    var oCur=null;
    for(var i=0;i<aObj.length;i++)
    {
    aObj[i].oncontextmenu=function(ev)
    {
    if(this.getAttribute('title'))
    {
    var oDiv=document.createElement('div');
    oDiv.className='alert';
    oDiv.style.left=this.offsetLeft+this.offsetWidth+'px';
    oDiv.style.top=this.offsetTop+'px';
    oDiv.innerHTML=this.getAttribute('title');
    document.body.appendChild(oDiv);
    oCur=oDiv;
    }
    return false;
    }
    }
    document.oncontextmenu=function(){
    return false;
    }
    }
    </script>
    </head>
     
    <body>
        <p id="test1" title="1">11111111111111111111</p>
            <span title="aaaa">aaaaaaaaaaaaaaaaaaaaaaa</span>
            <span id="test3">sadf23423411</span>
            <span title="ddd">ddddddddddddddddddddddddddddd</p>
    </body>
    </html>
      

  7.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <style>
    .alert{position:absolute;width:50px;height:30px;line-height:30px;background:#ccc; text-align:center;}
    </style>
    <script>
    window.onload=function()
    {
        var aObj=document.getElementsByTagName('span');
        var oCur=null;
        for(var i=0;i<aObj.length;i++)
        {
            aObj[i].oncontextmenu=function(ev)
            {
                if(this.getAttribute('title'))
                {
                    var oDiv=document.createElement('div');
                    oDiv.className='alert';
                    oDiv.style.left=this.offsetLeft+this.offsetWidth+'px';
                    oDiv.style.top=this.offsetTop+'px';
                    oDiv.innerHTML=this.getAttribute('title');
                    document.body.appendChild(oDiv);
                    oCur=oDiv;
    $(document).click(function() {
                            $('.alert').remove();
                            });
                }
                return false;
            }
        }
        document.oncontextmenu=function(){
            return false;
    }}
    </script>
    </head>
      
    <body>
        <p id="test1" title="1">11111111111111111111</p>
            <span title="aaaa">aaaaaaaaaaaaaaaaaaaaaaa</span>
            <span id="test3">sadf23423411</span>
            <span title="ddd">ddddddddddddddddddddddddddddd</span>
    </body>
    </html>
    修改一下，OK了 谢谢各位。