Question

这是一个jsfiddle https://jsfiddle.net/jes4fggd/。我想移动地图，但是随着div的跟随，鼠标指针看起来就像是事件被div捕获了。当鼠标悬停在div或按钮上时，我想将此事件传递给地图。我想只有点击事件可用于按钮，但拖动是用于地图。我尝试使用voteDiv1.style ['pointer-events'] ='none';但这对我来说有点棘手。有什么简单的方法吗？感谢。

search_results = twitter.getUserTimeline(sreen_name="SCREENNAME", count = 2,)
try:
for tweet in search_results["statuses"]:
    twitter.retweet(id = tweet["id_str"])
except TwythonError as e:
    print e

和另一个例子https://jsfiddle.net/q3ghvuu3/ - 如何以这种方式移动地图或点击按钮？

Answer 1

根据描述对你的目标感到困惑，但这是我最好的猜测：

点击地图应按预期拖动地图
单击按钮应按预期单击按钮
在地图上移动光标应该在地图周围移动按钮
点击并拖动按钮应拖动地图（大多数用户不希望这样做）

我将重申我最初担心这个用户界面是一个坏主意。用户熟悉看到地图上覆盖的按钮，例如谷歌地图上的缩放按钮，并知道要拖动地图，他们点击任何但按钮。所以我仍然建议不要这样做。但在这里。

要完成它，我们会将pointer-events: none添加到按钮元素。这样，所有点击和拖动都会进入地图。然后，我们检查点击的位置，看它是否发生在与按钮相同的位置，如果是，则向该按钮发送click事件。

mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuZGVybGlvIiwiYSI6ImNqM29qdXR5djAwMTQzM214M2hnZWVycWsifQ.jtDIyytOGMJ0TS9Pp6zFVg';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
  center: [-74.50, 40],
  zoom: 9 // starting zoom
});

var voteDiv1 = document.getElementById('vote1');
map.on('mousemove', function(e) {
  var c = map.project(e.lngLat);
  voteDiv1.style.left = (c.x) - 50 + 'px';
  voteDiv1.style.top = (c.y) - 50 + 'px';
});

document.getElementById("plus").addEventListener("click", function() {
  alert("Plus clicked")
})

document.getElementById("map").addEventListener("click", function(event) {
  var button = document.getElementById("plus");
  var buttonBB = button.getBoundingClientRect();

  if (
    event.pageX > buttonBB.left &&
    event.pageX < buttonBB.right &&
    event.pageY > buttonBB.top &&
    event.pageY < buttonBB.bottom
  ) {
    var bottomEvent = new Event("click");
    bottomEvent.pageX = event.pageX;
    bottomEvent.pageY = event.pageY;

    button.dispatchEvent(bottomEvent);
  }
  
  
})

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

#vote1 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js"></script>

<div id='map'></div>

<div id="vote1">
  <div id="box" sectionId="" style="border:1px solid blue;">
    <button id="plus" style="width:150px; height:150px">+</button>
  </div>
</div>

将拖拽事件从div传递到mapbox图层

1 个答案: