Question

我正在使用Backbone并拥有以下视图：

class GT.RunManager.Views.ViolationMarker extends Backbone.View
 className: 'violation-marker'

 template: JST['app/templates/violation_marker']

 initialize: (@options) ->
   @x = @options.x
   @y = @options.y
   @location = @options.location
   @render()

 render: =>
   @$el.html @template()
   @$el.data 'location', @location
   @$el.css
     'top': @y
     'left': @x
   this

来自：

class GT.RunManager.Views.FloorplanView extends Backbone.View
  className: 'floorplan-view'

  events:
   'click .violation-marker' : 'edit_location'
   'click'  : 'create_location'

 initialize: (@options) ->
   @run = @options.run
   @student = @options.student
   @floorplan = @options.run.get('floorplan')
   @locations = new GT.RunManager.Collections.Locations()
   @locations.run = @options.run
   @locations.on 'add', @set_marker
   @locations.on 'reset', @load_markers

 @run.on 'remove_location', (location) =>
   location.destroy() if location
   @load_markers()

 @locations.fetch data: { student_id: @student.id }
 @render()

render: =>
  if @floorplan
    @$el.css 'background-image', "url(data:image/png;base64,#{@floorplan.url})"
  this    

create_location: (e) =>
  @locations.create x: e.offsetX - 10, y: e.offsetY - 10, student_id: @student.id, run_id: @run.id

load_markers: =>
  @$el.find('i').remove()
  @locations.each (location) => @set_marker(location, false)

set_marker: (location, prompt = true) =>
  marker = new GT.RunManager.Views.ViolationMarker(location: location, x: location.get('x'), y: location.get('y'))
  @$el.append marker.el
  if prompt
    @run.trigger 'violations:set', location

我们的想法是在屏幕上放置一个用户触摸它的图标（在iPad上，用于exp）。它适用于Chrome和Safari，但不适用于Firefox，其中图标位于父div的左上角。

有什么想法吗？

编辑：此主干视图使用以下css进行样式设置：

div.violation-marker {
position: absolute;
background-color: red;
@include border-radius(6px);
padding: 4px;}

模板就是（bootstrap）：

<i class="icon icon-fire icon-white"></i>

父div的样式为：

.floorplan-view {
position: relative;
float: left;
margin-left: 100px;
width: 755px;
height: 755px; }

Answer 1

原来问题是Firefox不处理e.offsetX和e.offsetY。一旦我改变了捕捉位置的方式，一切都运行良好。这是获取x-coord的Firefox版本：

x = (ev.offsetX || ev.clientX - $(ev.target).offset().left)

感谢您的帮助。

jQuery .css（）不能在FF中工作，但可以在Chrome和Safari中使用

1 个答案: