pointer-events的用法:none;使用HTML CANVAS

Usage of pointer-events:none; with HTML CANVAS

本文关键字:使用 HTML CANVAS none 用法 pointer-events      更新时间:2023-09-26

在我的网页,我需要显示谷歌地图。但是我的网页也包含canvas元素。

现在,如果我使画布的z:索引高于地图,我就不能放大或向左/向右平移。如果我把map的z:index设置得比canvas元素高,它就会覆盖整个页面,这样我就看不到画在画布上的三角形了。

我使用了css属性pointer-events:none;,但它只在chrome和Mozilla中正常工作(在很大程度上)。但是IE(10)不支持它。

我如何达到相同的。在IE中也可以缩放和平移。

这是html部分

 <section id="intro3" data-navigation-tag="Plan" style="display: block; background-position: 50% 44.866px;">
        <canvas id="amenitycanvas" style="display:none;z-index:2;pointer-events:none;"></canvas>
<div id="link" style="position:absolute;">
           <a href="#" onclick="HideAndShowFunc('LOCATION')">LOCATION</a><br>
        </div>
<div class="image-display" id="displaylocate" style=" width:100%; height:100%;right:0%;top:0%;position:absolute;display:none;z-index:1;"> 
            <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.co.in/maps?t=m&amp;q=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu&amp;ie=UTF8&amp;hq=&amp;hnear=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu,+Mumbai,+Mumbai+Suburban,+Maharashtra&amp;z=14&amp;ll=19.104093,72.840396&amp;output=embed"></iframe><br /><small><a href="https://www.google.co.in/maps?t=m&amp;q=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu&amp;ie=UTF8&amp;hq=&amp;hnear=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu,+Mumbai,+Mumbai+Suburban,+Maharashtra&amp;z=14&amp;ll=19.104093,72.840396&amp;source=embed" style="color:#0000FF;text-align:left">View in Google Map</a></small>
        </div>
</section>

和javascript

function HideAndShowFunc(name)
        {
            if(name=="LOCATION")
           {
                $("#intro3canvas").hide();  
                $("#intro3logo50").hide(); 
                $("#essence-luxury").hide(); 
                $("#displayamenity").hide();
                $("#projlogodiv").hide();
                $("#link").hide();
                $("#intro3Ongoing").hide();
                $("#intro3Upgoing").hide();
                $("#intro3Completed").hide();
                $("#arrow").hide();
                $("#table-frame").hide();               
                $("#intro3bg").hide();
                $("#amenitycanvas").show(); 
                $("#displaylocate").show();
           }
           }

你应该试试Hand.js。它是指针事件的填充,本文可能会帮助您使用Hand.js