Отмените обработку событий jQuery

Я переработал ваш код, который выглядит следующим образом

<div className="row" style={{marginTop:'30px',}}>
    <div className="col-sm-6 col-md-3 col-lg-3" style={{display:'-webkit-inline-box', padding:'0px',}}>
        <label style={{backgroundColor: '#ffffff',margin: '5px 10px 5px 5px', position:'relative', float:'left',}} htmlFor="Airport_List">Airport :</label>
        <select value={this.state.airport} onChange={this.handleAirportChange} className="form-control" style={{width:'140px'}}>
          <option value="London">London</option>
          <option value="Houston">Houston</option>
          <option value="California">California</option>
          <option value="New Delhi">New Delhi</option>
          <option value="Moscow">Moscow</option>
        </select>
    </div>

    <div className="col-sm-6 col-md-3 col-lg-3" style={{display:'-webkit-inline-box', padding:'0px',}}>
      <span className="fa fa-plane" style={{padding:'5px',fontSize:'20px',}}> </span>
      <label style={{backgroundColor: '#ffffff',margin: '5px 10px 5px 5px',}} htmlFor="Flight No">Flight :</label>
      <input style={{
        width:'150px',
        margin: '0',
        outline: '0',
        border: '1px solid #e6ecf0',
        padding:'5px',
        borderRadius: '3px',backgroundColor:'#ffffff',
        color: 'rgb(158, 158, 158)',}}  
        onChange={this.handleFlightChange}  
        type="text" 
        id="flightNo" 
        name="flight_no" 
        className="form__input" 
        placeholder="Flight NO"  required/>
    </div>

    <div className="col-sm-6 col-md-3 col-lg-3">

    <div style={{float:'right', display:'-webkit-inline-box',margin:'5px',}}>

        <label style={{backgroundColor: '#ffffff',margin: '5px 6px 5px 5px',}} htmlFor="Date">Date :</label>
        <div className='input-group date' id='datetimepicker8' style={{left:'12px',}}>
          <DateTimePicker
            onChange={this.onDateChange}
            value={this.state.date}
            minDate={new Date()}
            name="datetime"
          />
        </div>
      </div>
    </div>

    <div className="col-sm-4 col-md-2 col-lg-2">
      <Button variant="contained" color="primary" style={{width:'100px', fontSize:'12px'}} onClick={this.handleSubmit}>Fetch</Button>
    </div>

    <div className="col-sm-2 col-md-1 col-lg-1">
      <div style={{position:'relative', bottom: '10px',}}>
        <Fab
          color={this.state.color}
          onClick={() => this.RecordAudio(this.state.color)}
        >{this.state.icon}</Fab>
      </div>
    </div>
</div>

Пожалуйста, добавьте meta tag, предложенный Rishab, если вы его не используете.

9
задан Benjamin 6 December 2013 в 16:02
поделиться

4 ответа

попытайтесь добавить следующую строку в обработчике событий jQuery:

return false;
4
ответ дан 4 December 2019 в 11:44
поделиться

Я не на 100% уверен, что Вы спрашиваете, но возможно это поможет:

Можно создать новый объект-событие (совместимый с W3C DOM) через подвергнутого конструктора События jQuery:

Например:

element.onclick = function(e) {
    var aBetterEventObject = jQuery.Event(e);
    // Now you can do what you want: (Cross-browser)
    aBetterEventObject.preventDefault()
    aBetterEventObject.isDefaultPrevented()
    aBetterEventObject.stopPropagation()
    aBetterEventObject.isPropagationStopped()
    aBetterEventObject.stopImmediatePropagation()
    aBetterEventObject.isImmediatePropagationStopped()
}

Править: Прочитывая Ваш вопрос снова, я не думаю, что распространение является проблемой - Вы, кажется, хотите отменить обработчик событий от выполнения в обработчике событий - я не уверен, что это возможно. Вы могли просто развязать все обработчики (jQuery (элемент) .unbind ('щелчок')), но я не думаю, что это - то, что Вы после...

7
ответ дан 4 December 2019 в 11:44
поделиться

Следование за ответом JimmyP. Я попробовал это

$('#x').click( function(e){
    alert('hello');
});
document.getElementById('x').onclick = function(){
    $('#x').unbind('click');
    alert("goodbye");
}

Событие jQuery работает однажды в этом примере. Я не думаю, что можно полагаться на порядок обработчиков, вызываемых однако, Вы определяете их, таким образом, я предполагаю, что необходимо будет признать, что событие jQuery могло бы стрелять однажды. Добавление onclick сначала препятствует тому, чтобы событие jQuery стреляло вообще, но, поскольку я сказал, я не думаю, что это надежно.

5
ответ дан 4 December 2019 в 11:44
поделиться

JQuery имеет метод для событий пространства имен. http://docs.jquery.com/Namespaced_Events

Можно добавить, инициировать и удалить отдельные функции, связанные с тем же событием через пространства имен:

$("a").bind("click.custom1",function(){ ... });
$("a").bind("click.custom2",function(){ ... });
$("a").trigger("click.custom2");
$("a").unbind("click.custom2");

Пока Вы развязываете namespaced событие, Ваш нормальный onclick должен быть незатронутым. Вам, вероятно, придется связать два отдельных пространства имен с событием щелчка как выше, если это не работает.

2
ответ дан 4 December 2019 в 11:44
поделиться
Другие вопросы по тегам:

Похожие вопросы: