css изолировать событие дочернего указателя

-2

Я хочу иметь возможность отделить событие указателя от флажка, чтобы он не вызывал событие родительского указателя, которое открывает модальный.css изолировать событие дочернего указателя

Вот GIF, показывающий мой вопрос: https://gyazo.com/856a84242349609f4506095de33ee1df

подробно остановиться на том, что происходит здесь, строки таблиц являются интерактивными и открыть модальный, который будет показывать расширенную информацию о нажатой строке. В дополнение к этому у меня есть флажок в этой строке, который имеет событие click сам, и я хочу изолировать этот флажок от запуска события щелчка «строка».

источник

2016-11-11 lax1n

Пожалуйста обеспечивают [mcve] –

Сначала укажите ваш пример. Во-вторых, очень легко предотвратить пузырение одного события. Но так как вы не показываете свой код, мы можем предоставить вам специальные предложения по нашим ответам. См. Ссылку, которую @ AllDani.com предоставит вам –

. Я понимаю, что вы говорите, но сложность этой проблемы заключалась в том, чтобы просто найти способ изолировать одно событие-указатель от своего родительского указателя. Я думал, что это достаточно понятно, но я, конечно, постараюсь улучшить мои будущие вопросы :) – lax1n

Для этого флажка необходимо использовать e.stopPropagation() в функции handleClick. Это предотвратит появление события click из флажка до элемента родительской строки.

class App extends React.Component { 
 
    handleCheckClick = (e) => { 
 
    console.log('checkbox clicked'); 
 
    e.stopPropagation(); 
 
    } 
 
    handleRowClick = (e) => { 
 
    console.log('row clicked'); 
 
    
 
    } 
 
    render() { 
 
    return (<table> 
 
     <thead> 
 
     <tr> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr onClick={this.handleRowClick}> 
 
      <td> 
 
      <input type="checkbox" onClick={this.handleCheckClick}/> 
 
      </td> 
 
      <td>Abc</td><td>XYZ</td> 
 
      
 
     </tr> 
 
     </tbody> 
 
    </table>) 
 
    } 
 

 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div id="app"></div>

источник

2016-11-11 13:48:40

css изолировать событие дочернего указателя

ответ

Смежные вопросы