Question

我在IconMenu组件中有一个Paper组件。我想阻止click事件在内部组件（IconMenu）上的传播。这就是我提出的，没有显着的结果（我也尝试用onTouchTap代替onClick，onMouseUp具有相同的效果）：永远不会调用_iconMenuClick方法。

render() {
     return (
         <Paper onClick={this._onClick}>
             <IconMenu iconButtonElement={iconButtonElement} onClick={this._iconMenuClick}>
                 {menuItems}
             </IconMenu>
         </Paper>
     );
}

_iconMenuClick(event) {
    MenuItem.onClick(event);
    event.stopPropagation();
}

Answer 1

停止顶级节点气泡事件:-) event.stopPropagation(); event.preventDefault();

Answer 2

我建议的解决方法如下：

render() {
     return (
         <Paper onClick={this._onClick}>
             <IconMenu iconButtonElement={iconButtonElement}>
                 {menuItems}
             </IconMenu>
             ...
         </Paper>
     );
}

_onClick(event){
    if(event.target.innerText==""){ //Or any condition that distinguish the IconMenu from the Paper element
        event.stopPropagation();
        return 0;
    }
    //continue with normal behaviour
    ...
}

Answer 3

除了使用var tiles = new L.GridLayer(); tiles.createTile = function (coords) { var tile = L.DomUtil.create('canvas', 'leaflet-tile'); var ctx = tile.getContext('2d'); var size = this.getTileSize() tile.width = size.x tile.height = size.y console.log(size.x); // 将切片号乘以切片分辨率，默认为256pixel,得到切片左上角的绝对像素坐标 var nwPoint = coords.scaleBy(size) // 根据绝对像素坐标，以及缩放层级，反投影得到其经纬度 var nw = map.unproject(nwPoint, coords.z) //从该切片左上角开始画，画一个切片大小的无填充矩形 ctx.strokeRect(nwPoint.x, nwPoint.y, size.x, size.y) ctx.fillStyle = 'black'; //x,y,z显示 ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 50, 60); //经纬度坐标 if(nw.lng<121 && nw.lng>119){ ctx.fillText('lat: ' + nw.lat + ', lon: ' + nw.lng, 50, 80); } console.log(nw); //线的颜色 ctx.strokeStyle = 'black'; //这是canvans的方法 ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(size.x - 1, 0); ctx.lineTo(size.x - 1, size.y - 1); ctx.lineTo(0, size.y - 1); ctx.closePath(); ctx.stroke(); // // for (i in da.paths) {//svg casnvas //console.log(da.paths[i].path); context = da.paths[i].path; p = new Path2D(context); // console.log(p); ctx.stroke(p); ctx.fill(p); ctx.fillStyle = 'lightpink'; } return tile; } tiles.addTo(map) 值得注意的是，它应该在event.stopPropagation();事件处理程序中编写。

我在将其写入onClick事件处理程序中时犯了一个错误，但这没有用。

我发现了解决方法here

编辑：

onChange

Material-ui：如何停止嵌套组件中click事件的传播

3 个答案: