地图的监听

      view.on("click",function(event){
        view.hitTest(event).then(function(response){
          if(response.results[0]){
            var graphic = response.results[0].graphic;
            leftClick(event);
          }
        })
      });

　　详情框的容器，最外层是地图容器

<div id="viewDiv">
  <div id="infowin">
    <div id="close">X</div>
    <div id="title"></div>
    <div id="content"></div>
    <div id="arrow"></div>
  </div>
</div>

　　详情框样式

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #infowin {
      height:237px;
      width: 400px;
      display: none;
      z-index: 10000;
    }

    #close {
      float: right;
      padding-top: 10px;
      font-weight: bold;
      font-size: 12px;
      color: #FFF;
      /*
      border: #000 1px solid;
      */
      height: 30px;
      width: 30px;
      text-align: center;
    }

    #close:hover {
      cursor: pointer;
    }

    #title {
      background-color: #1097ff;
      padding: 10px;
      font-weight: bold;
      font-size: 12px;
    }

    #content {
      padding-left: 10px;
      padding-top: 10px;
      background-color: #FFFFFF;
      height: 200px;
      color:#000000;
    }

    #arrow {
      position: absolute;
      width: 0px;
      height: 0px;
      line-height: 0px;
      border-top: 30px solid #FFFFFF;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      left: 190px;
      bottom: -30px;
    }
  </style>

　　详情框的初始化

   var isWindowShow=0;
      var closeInfoWin = function (evt){
        infowin=document.getElementById("infowin");
        infowin.style.display="none";
        isWindowShow=0;
      };

      //对话框
      var infowin,colse,title,content;
      var width=400,height=237,offset=30;
      var beforePoint;
      var beforeMapPoint;

      infowin = document.getElementById("infowin");
      colse = document.getElementById("close");
      title = document.getElementById("title");
      content = document.getElementById("content");

      function showinfowindow(point){
        var screenpoint = view.toScreen(point);
        beforeMapPoint = point;
        beforePoint=screenpoint;
        var x=screenpoint.x;
        var y=screenpoint.y;
        isWindowShow=1;

        infowin.style.left=(x-width/2)+"px";
        infowin.style.top=(y-height-offset)+"px";
        infowin.style.position="absolute";
        infowin.style.width=width+"px";
        infowin.style.height=height+"px";
        infowin.style.display="block";
      }

      function leftClick(evt){
        infowin.style.display="none";
        var strtitle="城市名称";
        var strcontent = "名称：1111111<br><br>年代：1991<br><br>省份：balabala<br><br>历史沿革：不详";
        title.innerHTML = strtitle;
        content.innerHTML = strcontent;

        this.evtMapPoint=evt.mapPoint;
        showinfowindow(this.evtMapPoint);
      }

　　地图监听

      //鼠标单击
      // view.on("click", leftClick);
      view.on("drag",function(ent){
        showinfowindow(this.evtMapPoint);
      });
      view.on("mouse-wheel",function(ent){
        showinfowindow(this.evtMapPoint);
      });
      //指针移动
      view.on("pointer-move",function(ent){
        showinfowindow(this.evtMapPoint);
      });
      //视野调整
      view.on("resize",function(ent){
        showinfowindow(this.evtMapPoint);
      });

      view.watch("stationary",function(ent){
        showinfowindow(this.evtMapPoint);
      });

　　完整代码

<html>
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="initial-scale=1,maximum-scale=1,user-scalable=no"
  />
-->
  <title>Intro to graphics - 4.11</title>

  <link
    rel="stylesheet"
    href="http://172.18.84.194:8080/arcgis_js_api/library/4.8/esri/themes/dark/main.css"
  />
  <script src="http://172.18.84.194:8080/arcgis_js_api/library/4.8/init.js"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #infowin {
      height:237px;
      width: 400px;
      display: none;
      z-index: 10000;
    }

    #close {
      float: right;
      padding-top: 10px;
      font-weight: bold;
      font-size: 12px;
      color: #FFF;
      /*
      border: #000 1px solid;
      */
      height: 30px;
      width: 30px;
      text-align: center;
    }

    #close:hover {
      cursor: pointer;
    }

    #title {
      background-color: #1097ff;
      padding: 10px;
      font-weight: bold;
      font-size: 12px;
    }

    #content {
      padding-left: 10px;
      padding-top: 10px;
      background-color: #FFFFFF;
      height: 200px;
      color:#000000;
    }

    #arrow {
      position: absolute;
      width: 0px;
      height: 0px;
      line-height: 0px;
      border-top: 30px solid #FFFFFF;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      left: 190px;
      bottom: -30px;
    }
  </style>

  <script>
    require(["esri/Map", "esri/views/MapView", "esri/Graphic"], function(
      Map,
      MapView,
      Graphic
    ) {
      var map = new Map({
        basemap: "hybrid"
      });

      var view = new MapView({
        center: [-80, 35],
        container: "viewDiv",
        map: map,
        zoom: 3
      });
      var point = {
          type: "point", // autocasts as new Point()
          longitude: -49.97,
          latitude: 41.73
        };
      var markerSymbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        color: [226, 119, 40],
        outline: {
          // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 2
        }
      };
      var pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
      });


      var polyline = {
          type: "polyline", // autocasts as new Polyline()
          paths: [[-111.3, 52.68], [-98, 49.5], [-93.94, 29.89]]
        };
      var lineSymbol = {
        type: "simple-line", // autocasts as SimpleLineSymbol()
        color: [226, 119, 40],
        width: 4
      };

      var lineAtt = {
        Name: "Keystone Pipeline",
        Owner: "TransCanada",
        Length: "3,456 km"
      };
      var polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: lineSymbol,
        attributes: lineAtt,
        popupTemplate: {
          // autocasts as new PopupTemplate()
          title: "{Name}",
          content: [
            {
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "Name"
                },
                {
                  fieldName: "Owner"
                },
                {
                  fieldName: "Length"
                }
              ]
            }
          ]
        }
      });

      var polygon = {
          type: "polygon", // autocasts as new Polygon()
          rings: [
            [-64.78, 32.3],
            [-66.07, 18.45],
            [-80.21, 25.78],
            [-64.78, 32.3]
          ]
        };

      // Create a symbol for rendering the graphic
      var fillSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: [227, 139, 79, 0.8],
        outline: {
          // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 1
        }
      };

      // Add the geometry and symbol to a new graphic
      var polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: fillSymbol,
        attributes: lineAtt
      });

      var highlight;
      view.on("click",function(event){
        if(highlight){
          highlight.remove();
        }
        view.hitTest(event).then(function(response){
          if(response.results[0]){
            var graphic = response.results[0].graphic;
            leftClick(event);
          }
        })
      });
      // Add the graphics to the view's graphics layer
      view.graphics.addMany([pointGraphic, polylineGraphic, polygonGraphic]);


      var isWindowShow=0;
      var closeInfoWin = function (evt){
        infowin=document.getElementById("infowin");
        infowin.style.display="none";
        isWindowShow=0;
      };

      //对话框
      var infowin,colse,title,content;
      var width=400,height=237,offset=30;
      var beforePoint;
      var beforeMapPoint;

      infowin = document.getElementById("infowin");
      colse = document.getElementById("close");
      title = document.getElementById("title");
      content = document.getElementById("content");

      function showinfowindow(point){
        var screenpoint = view.toScreen(point);
        beforeMapPoint = point;
        beforePoint=screenpoint;
        var x=screenpoint.x;
        var y=screenpoint.y;
        isWindowShow=1;

        infowin.style.left=(x-width/2)+"px";
        infowin.style.top=(y-height-offset)+"px";
        infowin.style.position="absolute";
        infowin.style.width=width+"px";
        infowin.style.height=height+"px";
        infowin.style.display="block";
      }

      function leftClick(evt){
        infowin.style.display="none";
        var strtitle="城市名称";
        var strcontent = "名称：1111111<br><br>年代：1991<br><br>省份：balabala<br><br>历史沿革：不详";
        title.innerHTML = strtitle;
        content.innerHTML = strcontent;

        this.evtMapPoint=evt.mapPoint;
        showinfowindow(this.evtMapPoint);
      }

      //鼠标单击
      // view.on("click", leftClick);
      view.on("drag",function(ent){
        showinfowindow(this.evtMapPoint);
      });
      view.on("mouse-wheel",function(ent){
        showinfowindow(this.evtMapPoint);
      });
      //指针移动
      view.on("pointer-move",function(ent){
        showinfowindow(this.evtMapPoint);
      });
      //视野调整
      view.on("resize",function(ent){
        showinfowindow(this.evtMapPoint);
      });

      view.watch("stationary",function(ent){
        showinfowindow(this.evtMapPoint);
      });
    });
  </script>
</head>

<body>
<div id="viewDiv">
  <div id="infowin">
    <div id="close" onClick="closeInfoWin()">X</div>
    <div id="title"></div>
    <div id="content"></div>
    <div id="arrow"></div>
  </div>
</div>
</div>
</body>
</html>

这里地图监听感觉有些缺漏。鼠标移动地图或缩放时会有点延迟。希望大神能够指正