Почему не срабатывает событие на обертке когда Button disabled?

Question

[Владимир Голубь]

Код

<div onMouseMove={() => {console.log('Hello')}} className={'wrap-button'}>
                            <button
                                {...buttonProps}
                                style={this.stylesElem}
                            >
                                {this.props.children}
                            </button>
                        </div>

При наведении на кнопку событие не срабатывает ?

Comments

[Роман Александрович]

а так?

<div onMouseMove={() => {return console.log('Hello')}} className={'wrap-button'}>
                            <button
                                {...buttonProps}
                                style={this.stylesElem}
                            >
                                {this.props.children}
                            </button>
                        </div>

[Владимир Голубь]

Роман Александрович, сбоку от кнопки все работает.

[Владимир Голубь]

Роман Александрович, даже так не работает

<div onMouseMove={() => {console.log('Hello')}} className={'wrap-button'}>
                            <button
                                disabled='disabled'
                            >
                                {this.props.children}
                            </button>
                        </div>

[Роман Александрович]

Владимир Голубь, так повесьте листенер куда вам надо

[Роман Александрович]

Так?

<div  className={'wrap-button'}>
                            <button
                                disabled='disabled'
                                style={this.stylesElem}
onMouseMove={() => {console.log('Hello')}}
                            >
                                {this.props.children}
                            </button>
                        </div>

[Владимир Голубь]

Роман Александрович, https://jsfiddle.net/fjao8m01/

[Владимир Голубь]

Роман Александрович, Не работает, при disabled автоматом отключаются все события.

Answer 1

[Антон Спирин]

.disabled {
  opacity: 0.8;
  pointer-events: none;
  user-select: none;
}

C помощью класса можно сделать неактивным любой элемент, например, стилизованные под кнопки ссылки.

Answer 2

[lnked]

попробуйте так

button:disabled {
  pointer-events: none;
}