2

I have added a slider from antd to Leaflet map, but when I clicked to slider it's also run map onclick event. I have tried to stop propagation but it only works with button.

enter image description here

Here is my code:

<div
    id='map'
    style={{
        width: '100%',
        height: "100vh",
        position: "relative",
      }}
>
   <div onClick={(e) => {
      if(e.target === e.currentTarget){
            e.stopPropagation();
            e.preventDefault();
            e.nativeEvent.stopImmediatePropagation();
      }
  }}>
         <div className='leaflet-control' // this classname help overlay the map
            style={{
                width: '100%', bottom: "10px", left: "0%", position: 'absolute'
            }}>
            <Layout
                style={{
                    width: "23%",
                    margin: 'auto',
                    padding: 7,
                    backgroundColor: '#FFFFFF'
                }}
            >
                <div style={{ fontSize: 14 }}>{title}</div>
                <Slider style={{ color: 'gray' }} defaultValue={100} 
                  tipFormatter={(value) => `${value}%`}
                    onChange={onChangeOpacity} />
            </Layout>
        </div >
  </div>
</div>

1 Answer 1

0

In my case, I had to stopPropagation of the mousedown and mouseup events.

In React:

<div onMouseDown={(e) => e.stopPropagation()} onMouseUp={(e) => e.stopPropagation()}>
  ...
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.